一、react簡(jiǎn)介
1、專(zhuān)注視圖層View，react并不是完整的MVC/MVVM框架，但可根據(jù)應(yīng)用場(chǎng)景自行選擇業(yè)務(wù)層框架，并根據(jù)需要搭配Flux、Redux、GraphQL/Relay來(lái)使用。 近幾年，前端解決方案也經(jīng)歷了 redux => dva => umi 的發(fā)展。
2、Virtual DOM提升性能，每次數(shù)據(jù)更新后，重新計(jì)算Virtual DOM，和上一次生成的做對(duì)比，對(duì)發(fā)生變化的部分做批量更新。shouldComponentUpdate生命周期回調(diào)減少數(shù)據(jù)變化后不必要的Virtual DOM對(duì)比過(guò)程，因?yàn)閷?duì)比DOM節(jié)點(diǎn)也是需要資源的，后面的文章里再介紹diff算法。
3、函數(shù)式編程與JSX語(yǔ)法是react的特點(diǎn)，可用其構(gòu)建可復(fù)用的react組件。
二、react組件
1、react組件由三部分組成：屬性（props）、狀態(tài)（state）、生命周期方法。如下圖所示
react組件可接收參數(shù)，也可能有自身的狀態(tài)，一旦其有所改變，react組件便執(zhí)行相應(yīng)的生命周期方法，最后渲染。
2、react組件構(gòu)建方法：三種構(gòu)建方法，React.createClass（不推薦）、ES6 classes和無(wú)狀態(tài)函數(shù)（stateless function）
React.createClass（不推薦）
用 React.createClass 構(gòu)建組件是 React 最傳統(tǒng)、也是兼容性最好的方法。在 0.14 版本發(fā)布之前，這一直都是 React 官方唯一指定的組件寫(xiě)法。示例代碼如下：
const Button = React.createClass({
getDefaultProps() {
return { color: 'blue', text: 'Confirm', };
},
render() {
const { color, text } = this.props;
return (
<button className={`btn btn-${color}`}>
<em>{text}</em>
</button>
);
}
});
從表象上看，React.createClass 方法就是構(gòu)建一個(gè)組件對(duì)象。當(dāng)另一個(gè)組件需要調(diào)用 Button 組件時(shí)，只用寫(xiě)成 <Button />，就可以被解析成 React.createElement(Button) 方法來(lái)創(chuàng)建 Button 實(shí)例，這意味著在一個(gè)應(yīng)用中調(diào)用幾次 Button，就會(huì)創(chuàng)建幾次 Button 實(shí)例。
ES6 classes
ES6 classes 的寫(xiě)法是通過(guò) ES6 標(biāo)準(zhǔn)的類(lèi)語(yǔ)法的方式來(lái)構(gòu)建方法：
import React, { Component } from 'react';
class Button extends Component {
constructor(props) {
super(props);
}
static defaultProps = {
color: 'blue',
text: 'Confirm',
};
render() {
const { color, text } = this.props;
return (
<button className={`btn btn-${color}`}>
<em>{text}</em>
</button>
);
}
}
這里的直觀(guān)感受是從調(diào)用內(nèi)部方法變成了用類(lèi)來(lái)實(shí)現(xiàn)。與 createClass 的結(jié)果相同的是，調(diào)用類(lèi)實(shí)現(xiàn)的組件會(huì)創(chuàng)建實(shí)例對(duì)象。
無(wú)狀態(tài)函數(shù)
使用無(wú)狀態(tài)函數(shù)構(gòu)建的組件稱(chēng)為無(wú)狀態(tài)組件，這種構(gòu)建方式是 0.14 版本之后新增的，且官方頗為推崇。示例代碼如下：
function Button({ color = 'blue', text = 'Confirm' }) {
return (
<button className={`btn btn-${color}`}>
<em>{text}</em>
</button>
);
}
無(wú)狀態(tài)組件只傳入 props 和 context 兩個(gè)參數(shù)；也就是說(shuō)，它不存在 state，也沒(méi)有生命周期方法，組件本身即上面兩種 React 組件構(gòu)建方法中的 render 方法。不過(guò)，像 propTypes 和 defaultProps 還是可以通過(guò)向方法設(shè)置靜態(tài)屬性來(lái)實(shí)現(xiàn)的。
在適合的情況下，我們都應(yīng)該且必須使用無(wú)狀態(tài)組件。無(wú)狀態(tài)組件不像上述兩種方法在調(diào)用時(shí)會(huì)創(chuàng)建新實(shí)例，它創(chuàng)建時(shí)始終保持了一個(gè)實(shí)例，避免了不必要的檢查和內(nèi)存分配，做到了內(nèi)部?jī)?yōu)化。
三、react數(shù)據(jù)流
1、state內(nèi)部狀態(tài)，可用setState方法改變狀態(tài)值，此方法是異步方法。
2、props組件傳值，自頂向下單向傳遞
3、用 function prop 與父組件通信
handleClick(item) {
// ...
this.props.onChange({item});
}
下一篇我們來(lái)學(xué)習(xí)下react生命周期
