一萤衰、組件
1.函數(shù)組件
如果你想寫的組件只包含一個 render 方法，并且不包含 state猜旬，那么使用函數(shù)組件就會更簡單脆栋。我們不需要定義一個繼承于 React.Component 的類，我們可以定義一個函數(shù)洒擦，這個函數(shù)接收 props 作為參數(shù)椿争，然后返回需要渲染的元素。它也稱為無狀態(tài)組價熟嫩。
function Square(props) {
return (
<Button className="square" onClick={props.onClick}>
{props.value}
</Button>
);
}
2.類組件
定義類組件秦踪，需要實例化，一般都繼承React.Component 的類掸茅，具有組件的生命周期方法椅邓，屬性 props 是外界傳遞過來的，狀態(tài) state 是組件本身的昧狮，狀態(tài)可以在組件中任意修改景馁，組件的屬性和狀態(tài)改變都會更新視圖。
class SimpleComponent extends React.Component {
constructor(props) {
super(props);
// 設(shè)置 initial state
this.state = {
};
}
componentDidMount() {
}
render() {
return (
<View>
</View>
)
}
}
3.類組件與函數(shù)組件的區(qū)別
| 區(qū)別 | 函數(shù)組件 | 類組件 |
|---|---|---|
| 是否有 this | 沒有 | 有 |
| 是否有生命周期 | 沒有 | 有 |
| 是否有狀態(tài) state | 沒有 | 有 |
二逗鸣、 React.Component
先上代碼：
class CounterButton extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
if (this.props.color !== nextProps.color) {
return true;
}
if (this.state.count !== nextState.count) {
return true;
}
return false;
}
}
shouldComponentUpdate 僅檢查了 props.color 或 state.count 是否改變合住。如果這些值沒有改變，那么這個組件不會更新
三慕购、 PureComponent
如果你的組件更復(fù)雜一些聊疲，你可以使用類似“淺比較”的模式來檢查 props 和 state 中所有的字段，以此來決定是否組件需要更新沪悲。React 已經(jīng)提供了一位好幫手來幫你實現(xiàn)這種常見的模式 - 你只要繼承 React.PureComponent 就行了获洲。
class CounterButton extends React.PureComponent {}
大部分情況下，你可以使用 React.PureComponent 來代替手寫 shouldComponentUpdate殿如。但它只進行淺比較 （例如：1 == 1或者ture==true贡珊，數(shù)組和對象引用是否相同），所以當(dāng) props 或者 state 某種程度是可變的話涉馁，淺比較會有遺漏门岔，那你就不能使用它了。
不要在props和state中改變對象和數(shù)組烤送，如果你在你的父組件中改變對象寒随，你的PureComponent將不會更新。雖然值已經(jīng)被改變，但是子組件比較的是之前props的引用是否相同妻往，所以不會檢測到不同互艾。
因此，你可以通過使用es6的assign方法或者數(shù)組的擴展運算符或者使用第三方庫讯泣，強制返回一個新的對象纫普。
當(dāng)數(shù)據(jù)結(jié)構(gòu)很復(fù)雜時，情況會變得麻煩好渠，存在性能問題昨稼。
（比較原始值和對象引用是低耗時操作。如果你有一列子對象并且其中一個子對象更新拳锚，對它們的props和state進行檢查要比重新渲染每一個子節(jié)點要快的多假栓。）
四、 何時使用Component 或 PureComponent ?
<1> 當(dāng)組件是獨立的晌畅，組件在頁面中的個數(shù)為1或2的但指，組件有很多props寡痰、state抗楔，并且當(dāng)中還有些是數(shù)組和對象的，組件需要每次都渲染的拦坠，使用Component
<2> 當(dāng)組件經(jīng)常作為子組件连躏，作為列表，組件在頁面中數(shù)量眾多贞滨，組件props, state屬性少入热，并且屬性中基本沒有數(shù)組和對象，組件不需要每次都渲染晓铆，只有變化了才渲染勺良，使用PureComponent
粗略總結(jié)，覺得有用或喜歡的就點個贊唄~
