React函数式组件怎么写生命周期呢？

Question

// home.tsx

import "./index.less";

const UseComponent = () => {
    return (
        <div className="card content-box">
            <span className="text">UseComponent 🍓🍇🍈🍉</span>
        </div>
    );
};

export default UseComponent;

初学React，不懂。我要加一个mount（componentDidMount）生命周期怎么写呢

Answer 1

首先，函数式组件是没有真正的我们在类组件里所说的生命周期的概念的。

然后，通常，我们会用 hooks 来代替模拟生命周期的行为，比如

useEffect(() =< {
  console.log('here the component mounted')
}, [])

函数式组件是现在主流推荐的写法，虽然有诸多让新人困惑的概念，比如重复执行，怎么搞定特定的生命周期，比如为什么总是不听的渲染，但确实有很多价值。

不过我个人角度并不盲目的推荐函数式组件，虽然我已经很少很少写类组件了，但我觉得生命周期的概念是有自己的价值的，只是很多时候不够用。

还有裸写 hooks 的话其实也有不少坑，如果想平滑一点过渡，可以使用一些三方库，提供了不少构建合理的 hooks 。比如 ahooks ， usehooks-ts 等，比如针对你的 mount 就有 useMount (https://ahooks.js.org/zh-CN/hooks/use-mount) 这样的 hook ，能帮新人更平滑的过渡。

Answer 2

建议先看官网
https://zh-hans.reactjs.org/d...
https://devhints.io/react

useState  --->    代表 state
useEffect
    给函数组件增加了操作副作用的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途。
    如果你的 effect 返回一个函数，React 将会在执行清除操作时调用它.
    可以使用多个 effect。这会将不相关逻辑分离到不同的 effect 中。允许我们按照代码的用途分离他们， 而不是像生命周期函数那样。React 将按照 effect 声明的顺序依次调用组件中的每一个 effect。
    如果某些特定值在两次重渲染之间没有发生变化，你可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可。
    useEffect(() => {document.title = `You clicked ${count} times`}, [count]); // 仅在 count 更改时更新
    如果你要使用此优化方式，请确保数组中包含了所有外部作用域中会随时间变化并且在 effect 中使用的变量，否则你的代码会引用到先前渲染中的旧变量。
    如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。

useReducer
    它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。

useRef
    返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。当 ref 对象内容发生变化时，useRef 并不会通知你。

Answer 3

使用hooks

不同的hook对应的生命周期参考下图：

ref:

https://wavez.github.io/react...

Answer 4

函数式组件有其相应的hook可以使用。比如你这个问题，可以使用useEffect来进行实现。

useEffect(()=>{
    ...具体内容实现代码
},[])

你可以具体看一下React的Hook相关部分。