大家好，我是Kason。你或者你的同事在使用useEffect的时候有没有遇到过下面的场景：当状态a发生变化之后你想发起一个请求，所以你使用了useEffect：useEffect(()=>{fetch(xxx);},[a])这段代码运行正常，上线后没有问题。随着需求不断迭代，其他地方也会修改状态a。但是在该需求中，statea发生变化后不需要发起请求。不想动之前的代码，又要修复这个bug，所以加了一个判断条件：useEffect(()=>{if(xxxx){fetch(xxx);}},[a])有一天，需求又变起来了！现在请求还需要b字段。很简单，你只是把b添加为useEffect的依赖：useEffect(()=>{if(xxxx){fetch(xxx);}},[a,b])随着时间的推移，你逐渐发现是否发送请求与if条件有关。是否发送请求还与a、b等依赖有关。A、B等依赖关系，涉及到很多需求。无法确定何时发送请求。上面的场景似曾相识，新的React文档已经明确提供了解决方案。欢迎加入人类优质前端框架群，带点理论知识飞上天。新文档中的这一部分称为与效果同步，目前处于草案状态。但是其中提到的一些概念对于所有React开发者来说应该都很清楚。首先，效果部分是EscapeHatches章节的一部分。从命名可以看出，开发者不一定需要使用效果，这只是特殊情况下的逃生通道。React中有两个重要的概念：渲染代码（renderingcode）事件处理器（eventhandler）渲染代码是指开发者编写的组件渲染逻辑，最终会返回一段JSX。例如，渲染代码在以下组件中：functionApp(){const[name,update]=useState('KaSong');return
Hello{name}
;}Rendering代码的特点是：它应该是一个没有副作用的纯函数。以下渲染代码包含副作用（计数变化），不推荐：letcount=0;functionApp(){count++;const[name,update]=useState('卡松');returnHello{name}
;}处理副作用事件处理程序是包含在组件中的函数，用于执行用户操作，并且可以包含副作用。以下操作属于Eventhandlers：更新input输入框，提交表单，导航到其他页面。在下面的例子中，组件内部的changeName方法属于Eventhandlers：functionApp(){const[name,update]=useState('KaSong');constchangeName=()=>{update('KaKaSong');}return