React入門系列 - 4. 認識無狀態組件

4.1 什麼是無狀態組件

在開發React組件的時候，你們可能會遇到就是我使用的這個組件純粹就是渲染使用，裏面並無本身的狀態、方法、生命週期等等操做。

而爲這種組件建立完整的實例有一種浪費機器性能的感受。

那麼，讓咱們來看看，如何建立一個easy react component。

新建一個文件noStateComponent.js，在裏面寫入以下代碼:

import React from "react";

export default (props)=><div>{props.name}</div>

接着修改index.js文件，導入這個無狀態組件

import React, { PureComponent } from "react";
import Content from './content.js'
import NoStateComponent from './noStateComponent'
export default class index extends PureComponent {
  ...
  render() {
    return (
      <div>
        Hello world React!{this.state.name}
        <p>組件生成時間:{this.state.time}</p>
        <p>{this.state.obj.join('<br/>')}</p>
        <button onClick={this.handleUpdateName.bind(this)}>修改值</button>
        <Content value={'我設置了' + this.state.time} >主體Children</Content>
        <NoStateComponent name="我沒有本身的狀態"></NoStateComponent>
        <NoStateComponent name="我只能依靠props直接渲染"></NoStateComponent>
      </div>
    );
  }
}

刷新瀏覽器，你會看到無狀態組件成功渲染在界面上。

固然並非無狀態組件沒法使用內部狀態，咱們修改一下無狀態組件。讓他增長一個內部維持的狀態

import React from "react";

export default function(props){
    let lastTime = +new Date()
    return <div>{props.name},lastTime:{lastTime}</div>
}

另外有一點須要注意，因爲是無狀態組件，因此，不管props是否變動，都會從新刷新這個組件。請看如下代碼

import React from "react";

export default function(props){
     let lastTime = +new Date()
     return <div>{props.name},lastTime:{lastTime}</div>
}

export default class Index extends React.PureComponent{
    constructor(props){
        super(props)
    }
    render () {
        let lastTime = +new Date()
        return <div>{this.props.name},lastTime:{lastTime}</div>
    }
}

咱們繼承的是React新的PureComponent，這個方法會自動對數據進行淺層對比。

你能夠經過註釋上面兩個export你會發現，點擊按鈕以後，若是是無狀態組件，那麼它將跟隨變更而刷新。
若是是繼承PureComponent的，則沒有任何改變。

reflink:https://www.yodfz.com/detail/...