effect的更新依赖屈指可数

发布时间：2021-05-23 05:23:51 所属栏目：编程来源：互联网

导读：useEffect中的第二个参数，可所以一个参数数组(依靠数组)。React更新DOM的头脑，不管进程奈何，只将功效展示给众人。 React在更新组件的时辰，会比拟props，通过

副问题[/!--empirenews.page--]

useEffect中的第二个参数，可所以一个参数数组(依靠数组)。React更新DOM的头脑，不管进程奈何，只将功效展示给众人。

React在更新组件的时辰，会比拟props，通过AST等方法较量，然后仅需更新变革了的DOM。

第二个参数相等于汇报了useEffect，只要我给你的这些参数任中之一产生了改变，你就执行effect就好了。云云，便可以镌汰每次render之后挪用effect的环境，镌汰了有时义的机能挥霍。

那么在开拓进程中，我们会实行在组件载入时辰，通过api获取长途数据，并运用于组件的数据渲染，以是我们行使了如下的一个简朴例子：

useEffect(() => {

featchData();

}, []);

因为是空数组，以是只有在组件挂载(mount)时获取一遍长途数据，之后将不再执行。假如effect中有涉及到局部变量，那么城市按照当前的状态产生改变，函数是每次城市建设(每次都是建设的新的匿名函数)。

function Counter() {

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

useEffect(() => {

const id = setInterval(() => {

setCount(count + 1);

}, 1000);

return () => clearInterval(id);

}, []);

return <h1>{count}</h1>;

}

你也许会以为上面的例子，会在组件加载后，每秒UI上count+1，但现实环境是只会执行一次。为什么呐?是不是认为有些违背直觉了?

由于，并没有给effect的依靠项插手count，effect只会在第一次渲染时辰，建设了一个匿名函数，尽量通过了setInterval包裹，每秒去执行count + 1，可是count的值始终是为0，以是在UI示意上永久渲染的是1。

虽然，通过一些法则，我们可以通过加上count来改变其值，可能通过useRef，可能通过setState(x => x+1)，模式来实现获取最新的值。譬喻下面的黑科技操纵：

// useRef

function Example() {

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

const countRef = useRef(count);

countRef.current = count; // 若是这一行代码放到effect函数中会怎么样呐？可以思索下！

// answer：在effect中count是effect匿名函数声明时就有了，值就是0，那么拿到的count值天然也是渲染前（本次props中的值）的count（值为0，再次复盘领略下快照的观念），但因为依靠数组中并不存在任何依靠，以是该匿名函数不会二次执行。

// 但，因为setInterval的缘故起因，函数会不断地setCount，要害是个中的参数了，countRef.current = count;取到的值是第一次快照时辰的值0，以是其更新的值永久为0+1 = 1。这样的功效是切合预期法则的。

// 那为什么放在表面就好了呐？由于countRef.current同步了count的最新值，每次render前就拿到了新的count值，而且赋值给countRef.current，因为ref的同步特征（实时性、同一性），以是轮回中获取的countRef.current也是最新的值，故而能实现计数结果

useEffect(() => {

const id = setInterval(() => {

setCount(countRef.current + 1);

}, 1000);

return () => clearInterval(id);

}, []);

return <h1>{count}</h1>;

}

// setState传入函数

function Example() {

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

useEffect(() => {