技術標籤：前端react

無狀態元件

函式，有兩個引數props和context，沒有內部狀態state，無生命週期，沒有例項化過程，也就沒有ref，沒有this。

專注於UI層，它自身不會對業務邏輯進行處理，它自身的一切只與props相關，一切需要定義state的地方，你都應該抽離到容器元件上面，或者使用redux之類的東西，進行抽離。

缺點：每次props更新，它都會重新繪製render函式。

function Animal(props, context) {

return(

<div>

<label></label>

<Input />

</div>

)

}

高階元件

高階元件的本質，是一個函式，只不過這個函式的返回值，是一個class型別的元件。

function highComponent(MyComponent) {
  return class A extends Component {
      constructor(props) {
          super(props);
          this.state = {
              isShow: true
          }
      }
      componentDidMount() {
          this.setState({
            isShow: false,
          })
      }
      render() {
          return (
              <MyComponent isShow={this.state.isShow}></MyComponent>
          )
      }
  }
}
 

高階元件聚焦於業務層，不關心元件的UI層，所以在上面的示例中，我們可以把MyComponent這個傳遞進來的元件，寫成無狀態元件。

純元件

PureComponent 內實現了shouldComponentUpdate()，它會自動檢查元件是否需要重新渲染。

props或setState使state改變了（淺比較）元件就更新，只比較props和state的記憶體地址，如果記憶體地址相同，則不更新。

通過減少render呼叫次數，來減少效能損耗。

使用場景應該是區域性資料發生改變的場景，比如帶有輸入框、switch開關等的UI元件就可以使用PureComponent元件封裝。

class Cat extends React.Purecomponnet {

props 或state值的地址改變才走重新整理

render(){

}

}