• home > webfront > ECMAS > react >

    React Hooks:React 函数式组件和类组件

    Author:zhoulujun Date:

    react从一开始就受到了很多函数式编程的影响,现在推行函数式组件算是“回归初心”
    函数组件性能比类组件好,但是在现代浏览器中,闭包和类的原始性能只有在极端场景下才会有明显的差别。

    性能主要取决于代码的作用,而不是选择函数式还是类组件。尽管优化策略有差别,但性能差异可以忽略不计

    1. 参考官网:(zh-hans.reactjs.org/docs/hooks-…)

    2. 参考作者github:(github.com/ryardley/ho…)

    函数式组件经常被忽略的点:函数式组件捕获了渲染所用的值。(Function components capture the rendered values.)

    函数式组件

    function ProfilePage(props) {
      const showMessage = () => alert('你好 ' + props.user);
      const handleClick = () => setTimeout(showMessage, 3000);
      return <button onClick={handleClick}>Follow</button>
    }

    等价于类组件

    class ProfilePage extends React.Component {
      // 这个类方法从 this.props.user 中读取数据。能在渲染方法以及生命周期方法中得到最新的实例。
      showMessage = () => alert('Followed ' + this.props.user);
      //调用一个回调函数读取 this.props 的 timeout 会让 showMessage 回调并没有与任何一个特定的渲染"绑定"在一起,所以它"失去"了正确的 props。。
      // handleClick = () => setTimeout(this.showMessage, 3000);
      handleClick = () => {    const {user} = this.props;
        setTimeout(() => this.showMessage(user), 3000);
      };
      render() {
        return <button onClick={this.handleClick}>Follow</button>;
      }
    }

    推荐阅读:React 函数式组件和类组件的区别,不是只有state和性能! https://juejin.cn/post/6844904049146331150,实际我们切记以下两点:

    1. 在 React 中 Props 是 不可变(immutable)的,所以他们永远不会改变。

    2. 而 this 是而且永远是 可变(mutable)的。**

    Hooks是比HOC和render props更优雅的逻辑复用方式,函数式组件的心智模型更加“声明式”。hooks(主要是useEffect)取代了生命周期的概念(减少API),让开发者的代码更加“声明化”:

    • 旧的思维:“我在这个生命周期要检查props.A和state.B(props和state),如果改变的话就触发xxx副作用”。这种思维在后续修改逻辑的时候很容易漏掉检查项,造成bug。

    • 新的思维:“我的组件有xxx这个副作用,这个副作用依赖的数据是props.A和state.B”。从过去的命令式转变成了声明式编程。

    其实仔细想一想,人们过去使用生命周期不就是为了判断执行副作用的时机吗?现在hooks直接给你一个声明副作用的API,使得生命周期变成了一个“底层概念”,无需开发者考虑。开发者工作在更高的抽象层次上了。

    类似的道理,除了声明副作用的API,react还提供了声明“密集计算”的API(useMemo),取代了过去“在生命周期做dirty检查,将计算结果缓存在state里”的做法。React内核帮你维护缓存,你只需要声明数据的计算逻辑以及数据的依赖。

    这里,还是得通读:为什么 React 现在要推行函数式组件,用 class 不好吗? - csr632的回答 - 知乎

    OPP是将业务抽象成事物之间的联系和转变;FB则是把业务抽象成信息的映射和转换

    参考内容:

    https://www.zhihu.com/question/343314784/answer/937174224




    转载本站文章《React Hooks:React 函数式组件和类组件》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/jsBase/2021_1226_8734.html