react Effect副作用 - 避免滥用Effect
- react Effect副作用
- 基础概率
- 什么是纯函数? 什么是副作用函数?
- 纯函数
- 副作用函数
- 什么时候使用Effect
- 如何使用Effect
- 避免滥用Effect
- 根据 props 或 state 来更新 state
- 当 props 变化时重置所有 state
- 将数据传递给父组件
- 获取异步数据
react Effect副作用
基础概率
阅读文章
React新文档：不要滥用effect哦
react 中文文档
什么是纯函数? 什么是副作用函数?
纯函数
仅执行计算操作，不做其他操作，这类函数通常被称为纯函数。
纯函数的特征
1.只负责自己的任务，它不会更改在该函数调用前就已存在的对象或变量。
2.输入相同，则输出相同，给定相同的输入，纯函数应总是返回相同的结果。
React 便围绕着这个概念进行设计，假设编写的所有组件都是纯函数。
React 的渲染过程必须自始至终是纯粹的，不改变在渲染前，就已存在的任何对象或变量。 – 这将会使其变得不纯粹，也就是我们说的产生副作用。
/*
案例1：不纯粹组件的写法
该组件正在读写其外部声明的 guest 变量。这意味着 多次调用这个组件会产生不同的 JSX！并且，如果 其他 组件读取 guest ，它们也会产生不同的 JSX，其结果取决于它们何时被渲染！这是无法预测的。
*/
let guest = 0;
function Cup() {
// Bad：正在更改预先存在的变量！
guest = guest + 1;
return <h2>Tea cup for guest #{guest}</h2>;
}
export default function TeaSet() {
return (
<>
<Cup />
<Cup />
<Cup />
</>
);
}
// 案例2：纯粹组件的写法
function Cup({ guest }) {
return <h2>Tea cup for guest #{guest}</h2>;
}
export default function TeaSet() {
return (
<>
<Cup guest={1} />
<Cup guest={2} />
<Cup guest={3} />
</>
);
}
React 提供了 “严格模式”，在严格模式下开发时，会调用每个组件函数两次。通过重复调用组件函数，严格模式有助于找到违反这些规则的组件。严格模式在生产环境下不生效，因此不会降低应用程序的速度。如需引入严格模式，可以用 <React.StrictMode> 包裹根组件。
副作用函数
在 React 中，副作用通常属于 事件处理程序。事件处理程序是 React 在你执行某些操作（如单击按钮）时运行的函数。即使事件处理程序是在组件内部定义的，它们也不会在渲染期间运行！ 因此事件处理程序无需是纯函数。
可以理解副作用为：额外发生的事情，与渲染过程无关。
如果无法为副作用找到合适的事件处理程序，可以选择使用useEffect。
什么时候使用Effect
React中有两个重要的概念
Rendering code渲染代码是不带副作用的纯函数，开发者编写的组件渲染逻辑，最终会返回一段JSX。// 渲染代码 function App() { const [age, setAge] = useState(10); return <div>{age}</div>; } // 包含副作用：在 React 中，JSX 的渲染必须是纯粹操作，不应该包含任何像修改 DOM 的副作用。 import { useState, useRef, useEffect } from 'react'; function VideoPlayer({ src, isPlaying }) { const ref = useRef(null); if (isPlaying) { ref.current.play(); // 渲染期间不能调用 `play()`，获取不到ref.current的值。 } else { ref.current.pause(); // 同样，调用 `pause()` 也不行。 } return <video ref={ref} src={src} loop playsInline />; }Event handlers事件处理器是组件内部的函数，用于执行用户操作，可以包含副作用。function App() { const [age, setAge] = useState(10); const changAge = () => { setAge(11); } return <div onClick={changAge }>{age}</div>; }
但是并不是所有副作用都能在Event handlers事件处理器中解决，比如初始化进入页面之后需要请求数据，也就是说不是由用户触发的可以让useEffect处理。
所以使用Event handlers还是useEffect的一个思路是：判断需求是否由用户行为触发
如何使用Effect
每个React组件都经历相同的生命周期
1.当组件被添加到屏幕上时，会进行组件的 挂载。
2.当组件接收到新的 props 或 state 时，通常是作为对交互的响应，它会进行组件的更新。
3.当组件从屏幕上移除时，它会进行组件的卸载。
使用说明
1.useEffect的参数只能是一般函数，不能是异步函数(async)。如果在useEffect里使用异步函数请求数据，需要其外部包装一个一般函数并调用。
2.默认情况下，Effect会在每次渲染后都会执行。如果添加依赖，当依赖发生变化时Effect会执行。
3.useEffect参数函数会在组件每次渲染完毕(dom渲染完毕)后执行。
4.在useEffect的回调函数中，可以返回一个函数，该函数被称为清理函数，该函数会在下次Effect执行前调用。可以在清理函数中，清除上一次Effect执行所带来的影响。
// 初始化 先Effect回调再清理函数
// 其他情况，先清理函数再Effect
const [keyword,setKeyword] = useState();
useEffect(()=>{
const timer = setTimeout();//初始化时，先设置一个定时器A
// 清理函数
return ()=>{
/*
这里形成了一个闭包，timer是定时器A的值。
下一次Effect执行前，先清理定时器A再生成新的定时器
*/
clearTimeout(timer);
}
},[keyword])
}
避免滥用Effect
核心：Effect通常用于暂时“跳出” React 代码并与一些外部系统进行同步。
思路
1.能使用Event handlers的优先使用Event handlers，useEffect是最后的选择。
2.可以在渲染时期进行的计算，就在渲染期间执行。
根据 props 或 state 来更新 state
先是用 fullName 的旧值执行了整个渲染流程，然后useEffect修改了fullName立即使用更新后的值又重新渲染了一遍。
function Form() {
const [firstName, setFirstName] = useState('Taylor');
const [lastName, setLastName] = useState('Swift');
// 🔴 避免：多余的 state 和不必要的 Effect
const [fullName, setFullName] = useState('');
useEffect(() => {
setFullName(firstName + ' ' + lastName);
}, [firstName, lastName]);
// ...
}
如果一个值可以基于现有的 props 或 state 计算得出，不要把它作为一个 state，而是在渲染期间直接计算这个值。
function Form() {
const [firstName, setFirstName] = useState('Taylor');
const [lastName, setLastName] = useState('Swift');
// ✅ 非常好：在渲染期间进行计算
const fullName = firstName + ' ' + lastName;
// ...
}
当 props 变化时重置所有 state
一个ProfilePage组件，它接收一个userId代表当前正在操作的用户，里面有一个评论输入框，用一个state来记录输入框中的内容。为了防止切换用户后，原用户输入的内容被当前的用户发出这种误操作，有必要在userId改变时置空state，包括ProfilePage组件的所有子组件中的评论state。
export default function ProfilePage({ userId }) {
const [comment, setComment] = useState('');
// 🔴 避免：当 prop 变化时，在 Effect 中重置 state
useEffect(() => {
setComment('');
}, [userId]);
// ...
}
当在相同的位置渲染相同的组件时，React 会保留状态。通过组件的key来判断当前的组件是否相同，每当 key（这里是 userId）变化时，React 将重新加载组件。
export default function ProfilePage({ userId }) {
return (
<Profile
userId={userId}
key={userId}
/>
);
}
function Profile({ userId }) {
// ✅ 当 key 变化时，该组件内的 comment 或其他 state 会自动被重置
const [comment, setComment] = useState('');
// ...
}
将数据传递给父组件
父组件：将修改state的方法传递给子组件
子组件：调用修改state的方法
在 React 中，数据从父组件流向子组件，当子组件在Effect 中更新其父组件的 state 时，数据流变得非常难以追踪。
// 不是很理解怎么会有这种写法？？
function Parent() {
const [data, setData] = useState(null);
// ...
return <Child onFetched={setData} />;
}
function Child({ onFetched }) {
const data = useSomeAPI();
// 🔴 避免：在 Effect 中传递数据给父组件
useEffect(() => {
if (data) {
onFetched(data);
}
}, [onFetched, data]);
// ...
}
如果组件和父组件都需要相同的数据，那么可以让父组件获取那些数据，并将其向下传递给子组件
function Parent() {
const data = useSomeAPI();
// ...
// ✅ 非常好：向子组件传递数据
return <Child data={data} />;
}
function Child({ data }) {
// ...
}
获取异步数据
非常常见的一种写法是在effect中异步获取数据，但这种代码存在一个问题
假设快速地输入 “hello”。那么 query 会从 “h” 变成 “he”，“hel”，“hell” 最后是 “hello”。这会触发一连串不同的数据获取请求，但无法保证对应的返回顺序。例如，“hell” 的响应可能在 “hello” 的响应 之后 返回。这种情况被称为 竞态条件：两个不同的请求 “相互竞争”，并以与你预期不符的顺序返回。
function SearchResults({ query }) {
const [results, setResults] = useState([]);
const [page, setPage] = useState(1);
useEffect(() => {
// 🔴 避免：没有清除逻辑的获取数据
fetchResults(query, page).then(json => {
setResults(json);
});
}, [query, page]);
function handleNextPageClick() {
setPage(page + 1);
}
// ...
}
可以给Effect添加一个清理函数，来忽略较早的返回结果。下面的案例采用一个变量ignore来控制这个Effect回调的"有效性"，只要是执行了下一个Effect回调，上一个的ignore就变成了true，此时如果刚好上一个Effect的请求结束，由于ignore=true会跳过setResults
function SearchResults({ query }) {
const [results, setResults] = useState([]);
const [page, setPage] = useState(1);
useEffect(() => {
let ignore = false;
fetchResults(query, page).then(json => {
if (!ignore) {
setResults(json);
}
});
return () => {
ignore = true;
};
}, [query, page]);
function handleNextPageClick() {
setPage(page + 1);
}
// ...
}
