前言

在 React 16.8 之前,函数组件只能是无状态组件,也不能访问 react 生命周期。hook 做为 react 新增特性,可以让我们在不编写 class 的情况下使用 state 以及其他的 react 特性,例如生命周期。接下来我们便举例说明如何使用 hooks 来模拟比较常见的 class 组件生命周期。

constructor

class 组件

class Example extends Component {
    constructor() {
        super();
        this.state = {
            count: 0
        }
    }
    render() {
      return null;
  }
}
1
2
3
4
5
6
7
8
9
10
11

函数组件不需要构造函数,可以通过调用 useState 来初始化 state

function Example() {
  const [count, setCount] = useState(0);
  return null;
}
1
2
3
4

componentDidMount

class 组件访问 componentDidMount

class Example extends React.Component {
  componentDidMount() {
    console.log('I am mounted!');
  }
  render() {
    return null;
  }
}
1
2
3
4
5
6
7
8

使用 hooks 模拟 componentDidMount

function Example() {
  useEffect(() => console.log('mounted'), []);
  return null;
}
1
2
3
4

useEffect 拥有两个参数,第一个参数作为回调函数会在浏览器布局和绘制完成后调用,因此它不会阻碍浏览器的渲染进程。
第二个参数是一个数组

  • 当数组存在并有值时,如果数组中的任何值发生更改,则每次渲染后都会触发回调。
  • 当它不存在时,每次渲染后都会触发回调。
  • 当它是一个空列表时,回调只会被触发一次,类似于 componentDidMount。

shouldComponentUpdate

class 组件访问 shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState){
  console.log('shouldComponentUpdate')
  // return true 更新组件
  // return false 则不更新组件
}
1
2
3
4
5

hooks 模拟 shouldComponentUpdate

const MyComponent = React.memo(
    _MyComponent, 
    (prevProps, nextProps) => nextProps.count !== prevProps.count
)
1
2
3
4

React.memo 包裹一个组件来对它的 props 进行浅比较,但这不是一个 hooks,因为它的写法和 hooks 不同,其实React.memo 等效于 PureComponent,但它只比较 props。

componentDidUpdate

class 组件访问 componentDidUpdate

componentDidMount() {
  console.log('mounted or updated');
}

componentDidUpdate() {
  console.log('mounted or updated');
}
1
2
3
4
5
6
7

使用 hooks 模拟 componentDidUpdate

useEffect(() => console.log('mounted or updated'));
1

值得注意的是,这里的回调函数会在每次渲染后调用,因此不仅可以访问 componentDidUpdate,还可以访问componentDidMount,如果只想模拟 componentDidUpdate,我们可以这样来实现。

const mounted = useRef();
useEffect(() => {
  if (!mounted.current) {
    mounted.current = true;
  } else {
   console.log('I am didUpdate')
  }
});
1
2
3
4
5
6
7
8

useRef 在组件中创建“实例变量”。它作为一个标志来指示组件是否处于挂载或更新阶段。当组件更新完成后在会执行 else 里面的内容,以此来单独模拟 componentDidUpdate。

componentWillUnmount

class 组件访问 componentWillUnmount

componentWillUnmount() {
  console.log('will unmount');
}
1
2
3

hooks 模拟 componentWillUnmount

useEffect(() => {
  return () => {
    console.log('will unmount');
  }
}, []);
1
2
3
4
5

当在 useEffect 的回调函数中返回一个函数时,这个函数会在组件卸载前被调用。我们可以在这里面清除定时器或事件监听器。

总结

引入 hooks 的函数组件功能越来越完善,在多数情况下,我们完全可以使用 hook 来替代 class 组件。并且使用函数组件也有以下几点好处。

  • 纯函数概念,同样的 props 会得到同样的渲染结果。
  • 可以使用函数组合,嵌套,实现功能更加强大的组件。
  • 组件不会被实例化,整体渲染性能得到提升。

但是 hooks 模拟的生命周期与class中的生命周期不尽相同,我们在使用时,还是需要思考业务场景下那种方式最适合。

参考链接

最后更新时间: 10/8/2019, 7:41:17 PM