React Hooks 精讲

这篇文章主要介绍 React 新特性 Hooks 以及应用场景。 

React Hooks 是 React 的一个新特性，在 React v16.8.0-alpha.0 上开始支持，主要是在一些函数组件上可以使用例如state等特性，原来必须在定义一个 Class 组件才可以使用。 

为什么需要 Hooks ? 

原来 React 推荐一些 Functional component, 内部不管理状态，通过父组件传入不同的 Props，渲染不同的功能或者样式，也叫木偶组件。 

但是纯粹的木偶组件没有状态管理机制和 life-cycles，还是会有很多不方便。打个比方，组件计数器 count 如果还要父组件传入并改变 Props 来实现，那就有些不合理。 于是我们需要 Hooks. 

React Hooks 

Hooks 并没有断崖式升级。 

1. 它是可选的。 也没有计划在未来改变 Class 组件的方式。 

2. 完全的向后兼容，它没有替代原来 React 的一些概念。 

3. 开箱即用。Hooks 目前是发布在 React v16.x 的beta版本。 

Hooks 的几种类型

1. State Hooks  

这里 useState 就是一个Hook, 可以在函数组件中使用 useState 来添加状态，useState 的输入参数是初始状态。 返回一对值，count 是状态的值，setCount 是更新对应状态的函数。 

一些例子， 

function ExampleWithManyStates() {

    // Declare multiple state variables!

    const [age, setAge] = useState(42);

    const [fruit, setFruit] = useState('banana');

    const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

    // ...

}

2. Effect Hooks 

Side effect hooks 主要是想在functional component用上 life-cycles, 如 componentDidMount, componentDidUpdate, componentWillUnmount 等，集合在一起就是 useEffect. 处理一些 render 以后的操作，如获取数据等等。 

每次 render 都会出发 useEffect 的调用。 因为 useEffect 是定义在组件的内部，所以 Props 和 State 都可以在 useEffect 的内部访问到。 

Hooks 的规则 

1. hooks 做用顶级函数调用，不要在loops, 条件，和嵌套函数里调用。 

2. 只在函数组件里使用hooks，在 Class 组件里不要用hooks.