duan602728596
2020-09-12 21:59:04 +08:00
最近的项目完全使用 react-hook 开发，是真的舒服。
在 react-hook 里就不要想着声明周期那一套，原来生命周期那一堆反而写起来很乱。
拿 useEffect 和生命周期函数做对比，是为了让开发者能了解 useEffect，在 class 组件和 function 组件内如何实现相同的功能。
```javascript
// class
class ClassComponent extends React.Component {
constructor() {
super();
this.state = {
data: this.props.data,
list: []
};
}
componentDidUpdate(prevProps, prevState) {
if (this.props.data !== prevProps.data) {
// do something
}
if (this.state.list !== prevState.list) {
// do something
}
if (this.props.data !== this.state.data) {
// do something
}
}
componentWillUnmount() {
// do something 1
// do something 2
}
}
// function hook
function FunctionComponent(props) {
const [list, setList] = React.useState([]);
React.useEffect(function() {
// do something
return function() {};
}, [props.data]);
React.useEffect(function() {
// do something
}, [list]);
}
```
class 组件的声明周期是渲染 /重新渲染 /组件卸载时，你需要自己来判断是哪些值变了，哪些值没变，所以在 class 组件的生命周期内可能会充斥着一堆的 if else 的判断。
function 组件的渲染 /重新渲染 /组件卸载，是由哪个值的变化引起的，然后执行这个值被依赖的 hook，即当这个值变化时，执行什么操作，反而更一目了然。