React class & function component 的区别

  1. React class
    class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
        }
      }
      render() {
        return (
          <div className="App"></div>
        )
      }
    }
  2. function component
    function App(props) {
       return (
          <div className="App"></div>
        )
    }
  3.   React class function component
    写法上面

    复杂,继承自React.Componet,constructor中接受props参数,render中返回react片段

    简单,直接接受props作为参数,return返回代码片段
    state状态 可以使用this.state,setState()等 无状态组件
    生命周期
    优点

    需要state来改变内部组件的状态

    需要使用一些生命周期

    可以提升性能,有些时候我们需要减少组件的渲染次数,我们就需要在组件内部用shouldComponentUpdate 方法来去判断,或者继承React.PureComponent 类(自动调用shouldComponentUpdate)来实现state和props的浅比较进行判断组件是否重新渲染。

    代码量少,容易编写

    无状态组件,更好的体现容器和表现分离

    提倡使用

猜你喜欢

转载自www.cnblogs.com/longlongdan/p/10776045.html
今日推荐