深入理解函数组件与useEffect

Preface

React Hooks 发布已经一年多了，越来越多的工程实践也开始拥抱Hooks。相信对于大多数早已读完文档的同学来说，使用Hooks已经是一件很简单的事，它使得我们可以将许多小的，不必要使用类来写的组件，轻松地使用useState和useEffect来实现。

在大多数情况下，将类组件重构为函数组件不会产生任何问题，但是你有没有遇到这样的问题：

函数组件获取到的是之前的props，而你想要最新的
一些effect没有按照你的预期产生
不知道如何正确在effect中fetch数据

而这些问题，都源于函数组件和类组件的区别。

每个人在刚开始使用Hooks的时候，都一定下意识地在使用Class模型思考，甚至在React官方文档中也这样写道：

但是当我们下意识地使用相同的模型思考并使用Hooks编程的时候，总是会出现一些不符合我们预期的情况。

这篇文章会通过函数组件与类组件的区别入手，来理解Hooks中最有趣useEffect，来回答上面的几个问题。

本文参考：

Dan Abramov - A complete guide to useEffect - https://overreacted.io/zh-hans/a-complete-guide-to-useeffect/
React Hooks Docs - https://reactjs.org/docs/hooks-intro.html

functional与class组件的区别

状态捕获

首先这里有两个概念：

props是immutable的
class的this是mutable的

这能让我们很好地理解下面的一些差异。

看下面一个组件：

funcional写法

function ProfilePage(props) {

const showMessage = () => {

alert('Followed ' + props.user);

};

const handleClick = () => {

setTimeout(showMessage, 3000);

};

return (

<button onClick={handleClick}>Follow</button>

);

}
复制代码

Class写法

class ProfilePage extends React.Component {

showMessage = () => {

alert('Followed ' + this.props.user);

};

handleClick = () => {

setTimeout(this.showMessage, 3000);

};

render() {

return <button onClick={this.handleClick}>Follow</button>;

}

}
复制代码

乍一看他们似乎一模一样，但看看下面的例子你就会发现他们的不同。

这个例子来自Dan的博客

分别使用class组件和functional组件的follow按钮，点击follow之后的三秒内，改变父级的user值。

看看有什么不同？

当我们点击Follow的时候，选择的用户是Dan，然后快速换成Sophie，最后弹出的是Sophie。

这是由于在user变化后，this被mutable了，理所当然地：this.props.user 取到的就是最新的Sophie。

如果从this中取，那props就永远会是最新的。

如何避免这种情况呢？比如这个例子中来说，我们肯定是希望点击fellow的时候，能锁定user为Dan。

答案是：闭包

class ProfilePage extends React.Component {

render() {

const { props } = this

const showMessage = () => {

alert('Followed ' + props.user);

};

const handleClick = () => {

setTimeout(showMessage, 3000);

};

return <button onClick={handleClick}>Follow</button>;

}

}
复制代码

这样的话，我们就能拿到每次的props，并且相应的处理函数也只会使用这一次渲染的props。

这样将函数都定义到render中的写法简直太蛋疼了，完全失去了类的优势。

但是在functional 组件中就不一样了。

function ProfilePage(props) {

const showMessage = () => {

alert('Followed ' + props.user);

};

const handleClick = () => {

setTimeout(showMessage, 3000);

};

return (

<button onClick={handleClick}>Follow</button>

);

}
复制代码

props作为函数的参数传进来，而且是immutable的，所以在这次渲染中，props是不会变的。所以使用functional 组件在上面的例子中，是这样的：

尽管在follow点击之后，user由Sophie更新为了Sunil，但仍然弹出的是Sophie。

函数式组件捕获了每次渲染所用的值（Capture Value）

再加深一下理解，下面这两个组件，是完全相等的：

// 组件1

function Example(props) {

useEffect(() => {

setTimeout(() => {

console.log(props.counter);

}, 1000);

});

// ...

}

// 组件二

function Example(props) {

const counter = props.counter;

useEffect(() => {

setTimeout(() => {

console.log(counter);

}, 1000);

});

// ...

}
复制代码

用同步取代生命周期

要将函数式组件的行为理解为一个函数，每当状态更新时，就会运行这个函数对页面中的状态进行同步（effect只是函数运行过程中的一部分，它并不独立）；而类组件，每当状态更新时，会依次调用生命周期函数进行响应。

获取上一次渲染的props

前面已经说了，function组件每次都会捕获当次渲染的props与state。而class组件有getDerivedStateFromProps可以获取上一次的state，function 组件该怎么办呢？

使用useRef，封装一个usePrev

function App() {

const [value, setValue] = useState(2)

const prevValue = usePrev(count)

return (

<p>Last: {prevValue}, now: {value}</p>

)

}

function usePrev(val) {

const ref = useRef()

useEffect(() => {

ref.current = val

})

return ref.current

}
复制代码

这里使用一个ref，在副作用中保存了当次渲染时的prop。

useEffect

useEffect是Hooks里面最有趣的，尽管我们在讨论effect的时候总是会不由自主地用生命周期来解释，但它根本不是生命周期，我们更喜欢称它为“副作用（Side Effect）”。

用法

useEffect可以让你在当前渲染结束后执行一些副作用。

function App() {

const [count, setCount] = useState(0)

useEffect(() => {

console.log('clicked!')

})

return <div>

{count}

<Button onClick={() => setCount(count+1)}>Click!</Button>

</div>

}
复制代码

正如React官方Docs中所说的，上面代码中的副作用会看起来像类组件中的componentDidMount和componentDidUpdate，也就是在每一次组件挂载与更新的时候都会运行这段副作用。

如果只想让它在第一次挂载的时候执行副作用，给useEffect的第二个参数传空数组即可（至于第二个参数到底是什么东西，后面会提到）。

useEffect(() => {

// side effect

}, [])
复制代码

第二个参数

要理解第二个参数是做什么用的，要从React的基本模型说起：对于下面两个组件

{/* component 1 */}

<div className="foo">Bill</div>

{/* component 2 */}

<div className="bar">Gates</div>
复制代码

在React看来就是两个对象

const component1 = { className: 'foo', children: 'Bill' }

const component2 = { className: 'bar', children: 'Gates' }
复制代码

当组件的状态发生变化时，React会使用之前的对象和现在的对象比较来确定是否更新。

如果我们也要求副作用也能在它依赖的状态发生变化的时候才运行，那么我们就需要比较不同的副作用。

所以Effect需要第二个参数：依赖

当我们注册这样一个Effect

const [count, setCount] = useState(0)

const [value, setValue] = useState(2)

useEffect(() => {

document.title = `You clicked ${count} times`
}, [count])
复制代码

的时候，effect就可以根据它的依赖count的值是否变化来进行对比，进而确定是否产生该副作用。所以在这个例子中，value的改变不会触发该副作用，只有count的改变会触发该副作用。

理解了第二个参数是为了diff，那么它的用法就很简单了：声明你的副作用所依赖的变量。

但千万不要将第二个参数理解为：当依赖的变量发生变化的时候，就会产生副作用。

还记得前面的一句话吗：当前渲染结束后执行一些副作用

也就是说，产生副作用有一个大前提：页面render/rerender ，其次才是diff依赖。

很多人用class的思维模型去使用hooks的时候，会觉得副作用会单独运行，这是错误的。

我们可能都尝试过类似下面的例子：

它有一个错误：

“像window.a这样外部的变量不是有效的依赖，因为他们的mutate不会引起组件的rerender”，其潜台词就是“只有render/rerender才可能会产生副作用”。

所以我们也就理解为啥称它为副作用了，因为副作用总是伴(render/rerender)生的。

使用函数作为第二个参数

当你在effect中进行一些例如fetchData的操作时，可能会这样写：

const fetchData = async () => {

fetch('...', {

state1,

state2,

}).then(() => {

// setState

})

}

useEffect(() => {

fetchData()

}, [])
复制代码

这经常让我们忘记了给effect的依赖添加state1与state2，有时候我们会使用eslint来约束，将fetchData写在effect里面。但其实还有更好的方法：

将函数直接作为effect的依赖。

你可能想问：你前面不是说了，只有导致rerender的变量才能作为依赖项，函数怎么能触发rerender呢？

Right，所以可以把这个fetchData包装一下：

const fetchData = useCallback(async () => {

fetch('...', {

state1,

state2,

}).then(() => {

// setState

})

}, [state1, state2])

useEffect(() => {

fetchData()

}, [fetchData])
复制代码

总结

本文先是比较了函数组件与类组件的不同，主要是：

类组件如果从this取状态，将会总取到最新的；但函数组件总是会捕获当次渲染的【所有】
函数组件的rerender，可以看作是执行函数来进行一次同步；而类组件是使用各个周期函数响应状态修改

之后，我们主要围绕useEffect，解释了一些使用类组件思维模型（完全不建议在函数组件中使用这种思维模型）导致的非预期情况。并且，对于一些函数组件中的特殊情况，给出了较好的解决方案。

提示

根据我国《网络安全法》，您需要绑定手机号后才可在掘金社区内发布内容。

深入理解函数组件与useEffect

Preface