React-朝花夕拾（1）

鱼予余
142 阅读3分钟

  • 一、有状态组件和无状态组件如何选取

    • 有状态组件

      • 内部需要定义state的组件
      • 这是一个简单的例子，通过按钮切换状态来控制展示信息。
      class Stated extends React.Component {   
    constructor() {
        super()
        this.state = {
            isShow:true                     //isShow需要变更，作为state
        }
        this.tipTrue:'小鱼仔很帅'            //这些数据至不需要变更，直接定到this上
        this.tipFalse:'各位看官更帅'
    }
    click(){
        this.setState({isShow:!this.state.isShow})
    }
    render() {    
        const { isShow } = this.state;
        return(<div>
            {isShow ? this.tipTrue : this.tipFalse}
            <button onClick={()=>{this.click()}}/>
        </div>)
    }
}

    • 无状态组件

      • 内部不需要定义state的组件
      • 下边代码是一个常见的无状态组件，用于展示固定格式的ui视图
          function UnStated(props){
        return <ul>{
            !!props.content.length && props.content.map((item)=>{
                return  <li key={item.id}>
                            {item.value}
                        </li>
            })
         }</ul>
    }

    • 使用场景：

      开发应用或某些功能开发前需要先思考，哪些组件需要设计成状态组件（功能复杂，需要在组件内记录状态），哪些组件需要设计成无状态组件（功能单一，只需要按一定方式展示）。React一般是通过少数的状态组件控制app的状态变更，并通过props将状态传给大量的无状态组件来进行ui展示。

  • 二、生命周期函数

    类组件所拥有的，函数组件没有这个生命周期

    • 一、挂载阶段

      组件被创建，执行初始化，挂载到DOM中，首次被渲染的过程。

      • 1.constructor
        ES6 class构造方法，组件创建时会调用自身构造方法。接受父组件传参props，通过super(props)将props传递给组件内部。
      • 2.componentWillMount
        首次挂载前调用一次，在这个周期调用this.setState不会使组件重新渲染，一般这个周期不会被用到。
      • 3.render
        render是一个纯函数，return返回一个React元素，用于描述该组件的UI，它并不负责实际DOM渲染，只提供UI的描述，由于是纯函数所以不能改变全局变量（状态），所以不得在render中执行this.setState。
      • 4.componentDidMount
        首次挂载后调用一次，一般用于处理异步请求，操作DOM等操作。

    • 二、更新阶段

      组件挂载后，其props和state变化时组件进行更新，当父组件重新render时，子组件也会进入更新阶段，但此时props未必发生了变化。

      • 1.componentWillReceiveProps
        当props改变时进入该周期，state改变时不会进入该周期。接受参数nextProps,代表更新后的props。父组件执行render也会进入该周期，此时this.props和nextProps不一定发生变化，此时需要进行判定，改变后再setState。
      • 2.shouldComponentUpdate
        该方法返回布尔值，通过布尔值判定是否进行更新过程，接受两个参数nextProps和nextState，一般通过与当前的props和state比较来确定是否继续进行更新，进而优化流程，终止更新避免不必要的渲染。
      • 3.componentWillUpdate
        render更新前执行，接受两个参数nextProps和nextState，实际使用中用的不多。
      • 4.render
        重新挂载组件
      • 5.componentDidUpdate
        render后执行，接受两个参数prevProps和prevState，这两个参数是更新前的state和props

    • 三、卸载阶段

      组件从DOM中卸载的过程

      • 1.componentWillUnmount
        一般是用于执行清理工作，比如清理计时器或者一些手动创建的DOM等，避免内存泄漏，提升前端性能。

    • 四、汇总

      • 1.执行setState的生命周期

        建议周期：componentWillReceiveProps。
        可执行但非必要不建议的周期：componentDidMount、componentDidUpdate。
        可执行但毫无意义的周期：componentWillMount、componentWillUnmount 。
        禁止执行的周期：shouldComponentUpdate、componentWillUpdate 。

    参考资料：
        《React 进阶之路》
        《深入React技术栈》
avatar
文章
阅读
粉丝