什么是 react-side-effect
react-side-effect 是一个高阶组件，它可以将组件的副作用（例如修改文档标题、设置滚动位置等）作为属性传递给父组件。该包使得在 React 应用程序中管理一些全局副作用变得更加容易。
如何使用 react-side-effect
安装
使用以下命令安装 react-side-effect：
npm install react-side-effect --save
用法
首先，导入 withSideEffect 函数和 HELMET_ATTRIBUTE 常量：
import withSideEffect, { HELMET_ATTRIBUTE } from 'react-side-effect';然后，创建一个组件：
const MyComponent = () => {
// your component logic here
return <div>Hello World</div>
};现在，使用 withSideEffect 包装你的组件，并实现 reducePropsToState 和 handleStateChangeOnClient 函数。这两个函数负责收集和处理当前组件状态的副作用。
-- -------------------- ---- ------- -------- ----------------------------- - ----- ----- - ------------------- ------ - ----- -- - -------- --------------------------- ----- -- - -------------- - ------ - ----- ------------------ - --------------- ------------------- ------------------------- ---------------
现在，你可以像平常一样渲染 WrappedMyComponent 组件了。
ReactDOM.render(
<WrappedMyComponent title="My Title" />,
document.getElementById('root')
);在这个例子中，reducePropsToState 从 title 属性中抽取了一个状态对象，并将其作为 handleStateChangeOnClient 的参数传递。最后，handleStateChangeOnClient 将标题设置为文档标题。
进一步学习
如果你想深入了解 react-side-effect，可以查看 官方文档 和 源代码。
示例代码
以下是一个完整的示例，演示了如何使用 react-side-effect 修改文档标题：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ --------------- - ---------------- - ---- -------------------- ----- ----------- - -- -- - -- ---- --------- ----- ---- ------ ---------- ----------- -- -------- ----------------------------- - ----- ----- - ------------------- ------ - ----- -- - -------- --------------------------- ----- -- - -------------- - ------ - ----- ------------------ - --------------- ------------------- ------------------------- --------------- ---------------- ------------------- --------- ------ --- ------------------------------- --
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/54787