背景
当你只是自己在开发的时候怎么方便怎么来，当你水平高一点的时候知道自我约束，当你成为一个小团队管理的时候只能无奈的制定规则，放弃自由和便捷。一下内容适合团队开发的规则制定
废话：
React Hooks 是 React 16.8 中引入的一项新功能，它允许你在不编写 class 组件的情况下使用 state 和其他 React 特性。通过使用 Hooks，你可以将组件的逻辑提取到可重用的函数中。React Hooks 没有类似于 class 组件中的生命周期方法，但是你可以使用 useEffect这个 Hook 来模拟生命周期行为。
在 React Hooks 中，没有与 class 组件中的生命周期方法完全对应的概念。但是，你可以使用
1.中级
以下是如何使用
useEffect
来模拟生命周期行为的示例：
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// 相当于 componentDidMount
useEffect(() => {
console.log('Component did mount');
return () => {
// 相当于 componentWillUnmount
console.log('Component will unmount');
};
}, []); // 空数组表示这个副作用只会在组件挂载和卸载时执行
// 相当于 componentDidUpdate
useEffect(() => {
console.log('Component did update');
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
在这个示例中，我们使用
useStateHook 来管理组件的状态，并使用
我们使用了两个 useEffect
Hook。第一个 useEffect 传入了一个空数组作为依赖项，这意味着它只会在组件挂载时执行一次，类似于 componentDidMount。同时，它返回了一个清除函数，这个函数会在组件卸载时执行，类似于 componentWillUnmount。
第二个 useEffect没有传入依赖项数组，这意味着它会在每次组件更新时执行，类似于 componentDidUpdate。请注意，这个 useEffect 也会在组件挂载时执行一次，因为挂载也被视为一次更新。
useEffect Hook 来处理副作用。useEffect
接受两个参数：一个函数，以及一个可选的依赖项数组。函数中的代码将在组件挂载和更新时执行，如果提供了依赖项数组，那么只有当数组中的值发生变化时，才会重新执行副作用。
在这个例子中，我们将文档的标题更新为显示点击次数。我们将 count作为依赖项传递给useEffect，这意味着只有当 count值发生变化时，才会重新执行副作用。
注意:useEffect函数return的匿名函数是一个可选的清除函数。这个清除函数将在组件卸载时执行，类似componentWillUnmount生命周期方法。
2.进入正题
我们当前需要考虑的是如何对高中初级的使用进行规范的约束，即使这可能会丧失Hooks 提供的更灵活、更简洁，但是我们的整体的代码质量和风格会在一个可控的范围内。
可以创建自定义的 React Hooks 函数来模拟生命周期行为。以下是一个示例，展示了如何创建自定义 Hooks 来模拟
2.1. componentDidMount 和 componentWillUnmount
我们可以使用 useEffectHook 来模拟 componentDidMount 和 componentWillUnmount。useEffect 接受一个函数作为参数，这个函数会在组件挂载后执行，并在组件卸载时执行清理操作。
import { useEffect } from 'react';
function useComponentDidMount(callback) {
useEffect(() => {
callback();
return () => {
// 在这里执行 componentWillUnmount 相关的操作
};
}, []); // 传入空数组，确保 useEffect 只在挂载和卸载时执行
}
2.2. componentDidUpdate
我们可以使用useEffectHook 来模拟 componentDidUpdate。useEffect 接受一个函数作为参数，这个函数会在组件挂载后以及依赖项更新时执行。
import { useEffect } from 'react';
function useComponentDidUpdate(callback, dependencies) {
useEffect(() => {
if (dependencies.length > 0) {
callback();
}
}, dependencies); // 传入依赖项数组，确保 useEffect 在依赖项更新时执行
}
2.3. shouldComponentUpdate
我们可以使用 React.memo 和自定义比较函数来模拟 shouldComponentUpdate。React.memo 是一个高阶组件，它会对组件的 props 进行浅比较，只有在 props 发生变化时才会重新渲染组件。
import React from 'react';
function shouldComponentUpdate(Component, compareFn) {
return React.memo(Component, compareFn);
}
2.4. getDerivedStateFromProps
我们可以使用 useEffect和 useState Hooks 来模拟 getDerivedStateFromProps。useEffect 会在组件挂载后以及依赖项更新时执行，我们可以在这个函数中更新 state。
import { useState, useEffect } from 'react';
function useDerivedStateFromProps(props, getDerivedState) {
const [state, setState] = useState(getDerivedState(props));
useEffect(() => {
setState(getDerivedState(props));
}, [props]);
return state;
}
2.5. getSnapshotBeforeUpdate
目前没有直接的方法来模拟 getSnapshotBeforeUpdate，因为函数组件没有类似于 componentDidUpdate 的生命周期函数。但是，我们可以使用 useLayoutEffect 来在 DOM 更新之前执行一些操作。
import { useLayoutEffect } from 'react';
function useSnapshotBeforeUpdate(callback) {
useLayoutEffect(() => {
callback();
});
}
2.6 componentWillUnmount
分别模拟了 componentDidMount
import { useEffect } from 'react';
function useComponentWillUnmount(callback) {
useEffect(() => {
return () => {
callback();
};
}, []);
}
3.完整代码如下customHooks
import { useLayoutEffect,useEffect,useMemo,useState } from 'react';
/**
*`componentDidMount` 和 `componentWillUnmount`
* callback 接受一个函数作为参数，这个函数会在组件挂载后执行，并在组件卸载时执行清理操作
*/
export function useComponentDidMount(callback,delfun=()=>{}) {
useEffect(() => {
callback();
return () => {
delfun()
// 在这里执行 componentWillUnmount 相关的操作
};
}, []); // 传入空数组，确保 useEffect 只在挂载和卸载时执行
}
/**
*`componentDidUpdate`
* dependencies传入依赖项数组，确保 useEffect 在依赖项更新时执行
*/
export function useComponentDidUpdate(callback, dependencies) {
useEffect(() => {
if (dependencies.length > 0) {
callback();
}
}, dependencies); // 传入依赖项数组，确保 useEffect 在依赖项更新时执行
}
/**
*`shouldComponentUpdate`
* `React.memo`
* Component第一个参数为纯函数的组件，
* compareFn第二个参数用于对比props控制是否刷新
*/
export function shouldComponentUpdate(Component, compareFn) {
return useMemo(Component, compareFn);
}
/**
*`useDerivedStateFromProps`
* props对比控制是否刷新，让组件在 props 变化时更新 state。
* getDerivedState我们需要定义一个 `getDerivedState` 函数，它接收 `props` 作为参数，并返回一个新的状态值
*/
export function useDerivedStateFromProps(props, getDerivedState) {
const [state, setState] = useState(getDerivedState(props));
useEffect(() => {
setState(getDerivedState(props));
}, [props]);
return state;
}
/**
*`useSnapshotBeforeUpdate`
* 在 DOM 更新之前执行一些操作。
* callback Dom更新前传入一个处理函数
*/
export function useSnapshotBeforeUpdate(callback) {
useLayoutEffect(() => {
callback();
});
}
请注意，这些自定义 Hooks 只是模拟类组件生命周期函数的方法，并不是完全等价的替代。在某些情况下，可能需要对这些自定义 Hooks 进行调整以满足特定需求。
现在你可以在你的组件中使用这些自定义 Hooks：
import {
shouldComponentUpdate,
useComponentDidMount,
useComponentDidUpdate,
useDerivedStateFromProps,
useSnapshotBeforeUpdate,
} from "@/customHooks";
//test useDerivedStateFromProps
const Child1 = (props) => {
function getDerivedState(props) {
console.log("child component will render");
return props.value * 2;
}
// 使用自定义的 useDerivedStateFromProps Hook
const derivedState = useDerivedStateFromProps(props, getDerivedState);
// 在这里，你可以使用 derivedState 来根据需要渲染组件或执行其他操作
return (
<div>
<p>Original value: {props.value}</p>
<p>Derived value: {derivedState}</p>
</div>
);
};
//test shouldComponentUpdate
const Child2 = (n) => {
console.log(n);
return <div>Child2{n <= 1 ? "unchange" : "changed"}</div>;
};
const App = () => {
const [count, setCount] = useState(0);
const [Vl, setVl] = useState(1);
//test componentDidMount & componentWillUnmount
useComponentDidMount(
() => {
console.log("Component did mount");
},
() => {
console.log("Component will unmount");
}
);
//test useComponentDidUpdate
useComponentDidUpdate(() => {
console.log("Component did update");
}, [count]);
// test useSnapshotBeforeUpdate
useSnapshotBeforeUpdate(() => {
console.log("useSnapshotBeforeUpdate");
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
<Child1 value={count}></Child1>
{/* test shouldComponentUpdate */}
{shouldComponentUpdate(() => Child2(count), [count])}
</div>
);
};
export default App;
小结
通过这种方式，我们可以将组件的生命周期逻辑抽离到自定义 Hooks 中，使得代码更加清晰和可维护。
实际使用根据各个团队情况微调后使用。
风格一向如常不喜欢说废话，有用拿走，没用出门右拐。
原文链接：https://juejin.cn/post/7215125397348728890 作者：吴佳浩
