react无状态组件和纯组件

react无状态组件和纯组件

无状态组件和有状态组件

函数组件又叫  ***无状态组件， 类组件又叫有状态组件 

状态 (state) 即数据

函数组件没有自己的状态，只负责数据展示 (静)

类组件又自己的状态，负责更新UI, 让页面 “动” 起来


other: 数据发生了变化，就是状态发生了变化，UI也要相应的更新，就要使用有状态组件来完成。


--------------------------------------------------------------------------------

1 无状态组件
无状态组件可以通过减少继承Component而来的生命周期函数而达到性能优化的效果。
从本质上来说，无状态组件就是一个单纯的render函数，所以无状态组件的缺点也是显而易见的。
因为它没有shouldComponentUpdate生命周期函数，所以每次state更新，它都会重新绘制render函数。

原则上，只要一个组件只具有render函数时，都可以封装成无状态组件

参考资料： https://blog.csdn.net/r122555/article/details/82783944

// 视图中的无状态组件

const Layout = (props) => {
  const [headerWidth, setHeaderWidth] = useState(false)
  const {
    match,
    allData,
    location
  } = props
  
  
   //  ....
  const renderSec = () => {
    return (
      (secondChildren && pathname !== '/layout')
        ? (
          <Suspense fallback={<div style={{ textAlign: 'center' }}><Spin size="large" /></div>}>
            <div className={cx('rigth-content')}>
              <div className={cx('content-border')}>
                <RouterView routes={secondChildren} />
              </div>
            </div>
          </Suspense>
        )
        : <div className={cx('love')}>I love Mountain wind ,<br />
          Summer rain <br />
          And your smile .
        </div>
    )
  }
  
  // ....
    return (
    <div className={cx('layout')}>
      <div className={cx('layouTop')}>
        <div className={cx('lay-top-left')}
          style={{ width: headerWidth ? 80 : 226 }}>xiaoU</div>
        <div className={cx('lay-top-right')}>
          <div className={cx('breade-left')}></div>
          <div className={cx('user-info')}>{username}</div>
        </div>
      </div>
      <div className={cx('layouBottom')}>
        {renderNav()}
        {renderSec()}
      </div>
    </div>
  )
}

纯组件 PureComponernt

自动的帮我们编写shouldComponentUpdate方法, 避免我们为每个组件都编写一次的麻烦