React hook 之 useState、useEffect_useeffect 碍浏览器更新视图

一、React hook

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。所以，不用再纠结使用无状态组件（Function）还是有状态组件（Class），拥有了hooks，你的所有组件都将是Function。既然Class都丢掉了，就不再需要面对this。以下进行简单举例：

1、使用class组件示例：

import React from 'react';

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  componentDidMount() {
    console.log(this.state.count);
  }

  componentDidUpdate() {
    console.log(this.state.count);
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>Click me</button>
      </div>
    );
  }
}

export default Example;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

2、使用Hook示例：

import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(count);    
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Example;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

二、useState

React中的useState Hook，可以在函数组件中存储并更新内部state变量。

在上述Example组件内部，通过调用useState声明一个新的state变量。它返回一对值给到命名的变量上。第一个返回值count存储的是点击次数，通过传0作为useState唯一的参数将其初始化为0。第二个返回值setCount本身是一个函数，可以更新count的值。当用户点击按钮后，我们传递一个新的值给setCount。React会重新渲染Example组件，把最新的count传给它。

useState是可以多次调用的，假如一个组件有多个状态值，可以这样写：

const [sourceList, setSourceList] = useState([]);
const [dba, setDba] = useState('测试');
1
2

其次，useState接收的初始值没有规定一定要是string/number/boolean这种简单数据类型，它完全可以接收对象或者数组作为参数。

三、useEffect

React中的useEffect Hook，可以在函数组件中执行副作用操作。通过使用这个Hook，通知React组件需要在渲染后执行什么操作。

React首次渲染和之后的每次渲染都会执行传给useEffect的函数。而之前要用两个生命周期函数来分别表示首次渲染（componentDidMount），和之后的更新导致的重新渲染（componentDidUpdate）。

若要控制函数的执行，可以用第二个参数来告诉react只有当这个参数的值发生改变时，才执行传的副作用函数（第一个参数），如下：

useEffect(() => {
  console.log(count);    
}, [count]);
1
2
3

当第二个参数传一个空数组[]时，就相当于只在首次渲染的时候执行。

注：useEffect中定义的副作用函数的执行不会阻碍浏览器更新视图，即这些函数是异步执行的，而之前的componentDidMount或componentDidUpdate中的代码则是同步执行的。

参考：

• https://www.jianshu.com/p/aafccf6e9ad6
• http://www.ptbird.cn/react-hoot-useEffect.html#menu_index_1
• https://www.jianshu.com/p/89dbbe011bf2