Effect Hook 可以让你在函数组件中执行副作用操作，同参这里提到副作用，数有式什么是执行副作用呢，就是规则除了状态相关的逻辑，比如网络请求，和返回方监听事件，同参查找 dom。数有式

可以这样说，执行在使用了useState或是规则useEffect这样的hooks之后，每次组件在render的和返回方时候都生成了一份本次render的state、function、同参effects，数有式这些与之前或是执行之后的render里面的内容都是没有关系的。而对于class component来说，规则state是和返回方一种引用的形式。这就造成了二者在一些表现上的不同。

只要是副效应，都可以使用useEffect()引入。免费信息发布网它的常见用途有下面几种。

副效应是随着组件加载而发生的，那么组件卸载时，可能需要清理这些副效应。

useEffect()允许返回一个函数，在组件卸载时，执行该函数，清理副效应。如果不需要清理副效应，useEffect()就不用返回任何值。

使用useEffect()时，有一点需要注意。如果有多个副效应，应该调用多个useEffect()，而不应该合并写在一起。

一、参数规则

1.可选的

2.数组类型

3.值为state或者props

二、不同的参数和返回

默认的行为，会每次 render 后都执行，一般表单控制中使用。

类似于类组件中的componentDidMoount以及componentDidUpdate。

useEffect(() => {

console.log(useEffect with no dependency)

传入第二个参数，每次 render 后比较数组的值没变化，不会在执行。

类似于类组件中的源码下载 componentDidMount。

useEffect(() => {

console.log(useEffect with empty dependency)

传入第二个参数，只有一个值，比较该值有变化就执行

传入第二个参数，有2个值的数组，会比较每一个值，有一个不相等就执行；

类似于类组件中的componentDidUpdate；

useEffect(() => {

console.log(useEffect widh specify dependency)

}, [state, props])

返回时传递一个函数进行卸载，在组件卸载时候调用；

类似于类组价中componentWillUnmout。

useEffect(() => {

console.log(useEffect widh specify callback); 　　

return () => { 　　　　

console.log(useEffect with specify callback); 　　

}

如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

class Example extends React.Component {

constructor(props) {

super(props);

this.state = {

count: 0

};

}

componentDidMount() {

document.title = `You clicked ${this.state.count} times`;

}

componentDidUpdate() {

document.title = `You clicked ${this.state.count} times`;

}

render() {

return (

You clicked {this.state.count} times

Click me

);

}

}使用 Hook 的示例import React, { useState, useEffect } from react;

function Example() {

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

useEffect(() => {

document.title = `You clicked ${count} times`;

});

return (

You clicked {count} times

Click me

);

默认情况下，它在第一次渲染之后和每次更新之后都会执行。你可能会更容易接受 effect 发生在“渲染之后”这种概念，不用再去考虑“挂载”还是“更新”。React 保证了每次运行 effect 的同时，DOM 都已经更新完毕。

数据获取，设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。有些副作用可能需要清除，所以需要返回一个函数，比如挂载时设置定时器，卸载时取消定时器。

class Example extends Component {

constructor (props) {

super(props);

this.state = {

count: 0

}

}

componentDidMount() {

this.id = setInterval(() => {

this.setState({count: this.state.count + 1})

}, 1000);

}

componentWillUnmount() {

clearInterval(this.id)

}

render() {

return

{this.state.count}

}

}使用 Hook 的示例function Example() {

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

useEffect(() => {

const id = setInterval(() => {

setCount(c => c + 1);

}, 1000);

return () => clearInterval(id);

}, []);

return

{count}

最新评论