React Hooks介绍

原文信息: 查看原文查看原文

https://reactjs.org/docs/hooks-intro.html

- Reactjs.org

React 16.7版本中新增了Hooks特性,这个特性可以让你不用创建一个class组件,就可以使用state特性(使用useState这个State Hook)。

什么是Hook?

Hooks是一些函数,这些函数可以让你在函数式组件内的React state和生命周期特性中放置钩子。它有两个严格的规则:

  • Hooks只在最高层级执行,不要在循环、条件判断和嵌套函数里执行;
  • Hooks只在React的函数式组件内执行,不要在常规的JavaScript函数里执行。

React内置了一些Hooks,比如useState。开发者也可以自定义一些可复用的state化的操作,在不同组件内使用。

文中介绍了React的另一个内置Hook:Effect Hock。这个Hook通过useEffect来调用,它是用来在函数式组件内扮演着class组件内componentDidMount、componentDidUpdate和componentWillUnmount三合一的函数。它的使用方法是,useEffect函数体内的代码(除返回值)会在componentDidMount和componentDidUpdate时被执行,而返回值(是一个函数)会在componentWillUnmount时被执行。


与以往的生命周期函数不同的是,Hooks可以在函数式组件内被多次使用。

文中还介绍了如何自定义一个Hook,用来在多个组件内使用,希望这篇文章能给你启发,更好地使用React即将正式发布的Hooks新特性。

分享于 2018-10-30

访问量 1179

预览图片