1巧号、項(xiàng)目基本搭建
create-react-app是react中最簡(jiǎn)單的創(chuàng)建單頁(yè)面程序的方式述吸。在使用它之前先保證你的機(jī)器上安裝了Node環(huán)境
# 全局安裝create-react-app
$ yarn global add create-react-app
# 創(chuàng)建項(xiàng)目
create-react-app react01
cd react01
yarn start
//瀏覽器localhost:3000/可以查看到開(kāi)啟的服務(wù)
2艘策、JSX語(yǔ)法簡(jiǎn)介
簡(jiǎn)單的JSX語(yǔ)法
const element = <h1>Hello, world!</h1>;
它被稱(chēng)為 JSX刻炒， 一種 JavaScript 的語(yǔ)法擴(kuò)展
在 JSX 中使用表達(dá)式
你可以任意地在 JSX 當(dāng)中使用JavaScript 表達(dá)式在 JSX 當(dāng)中的表達(dá)式要包含在大括號(hào)里
const str = "hello world" + "你好世界";
const element = (
<h1>
Hello, {str}
</h1>
);
JSX 本身其實(shí)也是一種表達(dá)式
在編譯之后呢堤框，JSX 其實(shí)會(huì)被轉(zhuǎn)化為普通的 JavaScript 對(duì)象。
這也就意味著靡挥，你其實(shí)可以在 if 或者 for 語(yǔ)句里使用 JSX序矩，將它賦值給變量，當(dāng)作參數(shù)傳入跋破，作為返回值都可以
const renderJsx = () => {
let a = 10;
if(a > 5){
return <div>hello {a}</div>
}else{
return <div>hello world</div>
}
}
//=======調(diào)用renderJsx()即可
render(){
return(
<div>{renderJsx()}</div>
)
}
JSX 屬性
//你可以使用引號(hào)來(lái)定義以字符串為值的屬性
const element = <div tabIndex="0"></div>;
//===
//也可以使用大括號(hào)來(lái)定義以 JavaScript 表達(dá)式為值的屬性
const element = <img src={user.avatarUrl} />;
切記你使用了大括號(hào)包裹的 JavaScript 表達(dá)式時(shí)就不要再到外面套引號(hào)了簸淀。JSX 會(huì)將引號(hào)當(dāng)中的內(nèi)容識(shí)別為字符串而不是表達(dá)式
JSX 嵌套(可以相互嵌套)
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
因?yàn)?JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase 小駝峰命名 來(lái)定義屬性的名稱(chēng)，而不是使用 HTML 的屬性名稱(chēng)毒返。
例如啃擦，class 變成了 className，而 tabindex 則對(duì)應(yīng)著 tabIndex
JSX 防注入攻擊
你可以放心地在 JSX 當(dāng)中使用用戶(hù)輸入：
React DOM 在渲染之前默認(rèn)會(huì) [過(guò)濾]所有傳入的值饿悬。它可以確保你的應(yīng)用不會(huì)被注入攻擊。所有的內(nèi)容在渲染之前都被轉(zhuǎn)換成了字符串聚霜。這樣可以有效地防止 [XSS(跨站腳本)]攻擊狡恬。
const title = response.potentiallyMaliciousInput;
// 直接使用是安全的：
const element = <h1>{title}</h1>;
更多代碼注入注意：https://zhuanlan.zhihu.com/p/28434174
3珠叔、組件&props
1、組件定義
js函數(shù)定義
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
2弟劲、你也可以使用ES6 class來(lái)定義一個(gè)組件:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
//調(diào)用
<Welcome name="lily"/>
3祷安、組件渲染
import React, { Component } from 'react';
import './App.css';
//====組件 Welcome
function Welcome(props) {
return <div>hello, {props.name}</div>
}
const element = <Welcome name={"lily"}/>;
class App extends Component {
render() {
return (
<div className="App">
{element}
</div>
);
}
}
export default App;
4、生命周期詳解
1兔乞、state：傳遞及狀態(tài)的改變
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
//通過(guò)事件值的改變
clickEvent(){
this.setState({
date: "2019-03-27"
})
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
2汇鞭、生命周期
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
//當(dāng) `Clock` 組件第一次被渲染到 DOM 中的時(shí)候，就為其設(shè)置一個(gè)計(jì)時(shí)器這在 React 中被稱(chēng)為“掛載（mount）”庸追。
//=====設(shè)置計(jì)時(shí)器：
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
//同時(shí)霍骄，當(dāng) DOM 中 `Clock` 組件被刪除的時(shí)候，應(yīng)該清除計(jì)時(shí)器這在 React 中被稱(chēng)為“卸載（umount）”淡溯。
//==清除計(jì)時(shí)器
clearInterval(this.timerID);
}
//定時(shí)器方法
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
3读整、正確地使用 State
不要直接修改 State，此代碼不會(huì)重新渲染組件
// Wrong
this.state.comment = 'Hello';
//yes
//而是應(yīng)該使用 setState():
this.setState({comment: 'Hello'});
4咱娶、State 的更新可能是異步的
出于性能考慮米间，React 可能會(huì)把多個(gè) setState() 調(diào)用合并成一個(gè)調(diào)用。因?yàn)?this.props 和 this.state 可能會(huì)異步更新膘侮，所以你不要依賴(lài)他們的值來(lái)更新下一個(gè)狀態(tài)屈糊。
此代碼可能會(huì)無(wú)法更新計(jì)數(shù)器：
// Wrong
this.setState({
counter: this.state.counter + this.props.increment,
});
要解決這個(gè)問(wèn)題，可以讓 setState() 接收一個(gè)函數(shù)而不是一個(gè)對(duì)象琼了。這個(gè)函數(shù)用上一個(gè) state 作為第一個(gè)參數(shù)逻锐，將此次更新被應(yīng)用時(shí)的 props 做為第二個(gè)參數(shù)
// Correct
this.setState((state, props) => ({
counter: state.counter + props.increment
}));
5、事件處理
1表伦、事件命名：小駝峰式（camelCase）
6谦去、條件渲染
與運(yùn)算符 &&
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}
const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
<Mailbox unreadMessages={messages} />,
document.getElementById('root')
);
三目運(yùn)算符
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
阻止組件渲染
在極少數(shù)情況下，你可能希望能隱藏組件蹦哼，即使它已經(jīng)被其他組件渲染鳄哭。若要完成此操作，你可以讓 render 方法直接返回 null纲熏，而不進(jìn)行任何渲染
import React, { Component } from 'react';
function WarningBanner(props) {
if (!props.warn) {
return null;
}
return (
<div className="warning">
Warning!
</div>
);
}
class App extends Component {
render() {
return (
<div className="App">
<WarningBanner/>
</div>
);
}
}
export default App;
在組件的 render 方法中返回 null 并不會(huì)影響組件的生命周期妆丘。例如，上面這個(gè)示例中局劲，componentDidUpdate 依然會(huì)被調(diào)用
7勺拣、列表keys
Keys 幫助 React 識(shí)別哪些元素改變了，比如被添加或刪除鱼填。因此你應(yīng)當(dāng)給數(shù)組中的每一個(gè)元素賦予一個(gè)確定的標(biāo)識(shí)
一個(gè)元素的 key 最好是這個(gè)元素在列表中擁有的一個(gè)獨(dú)一無(wú)二的字符串
當(dāng)元素沒(méi)有確定 id 的時(shí)候药有，萬(wàn)不得已你可以使用元素索引 index 作為 key
const todoItems = todos.map((todo, index) =>
// Only do this if items have no stable IDs
<li key={index}>
{todo.text}
</li>
);
8、狀態(tài)提升
通常，多個(gè)組件需要反映相同的變化數(shù)據(jù)愤惰，這時(shí)我們建議將共享狀態(tài)提升到最近的共同父組件中去, 通過(guò)改變父級(jí)的狀態(tài)統(tǒng)一改變子組件的狀態(tài)
