如何在React钩子中使用componentWillMount() ?

在React的官方文档中提到了-

如果你熟悉React类的生命周期方法，你可以思考将useEffect钩子作为componentDidMount, componentDidUpdate和 componentWillUnmount总和。

我的问题是-我们如何在钩子中使用componentWillMount()生命周期方法?

当前回答

对你最初的问题的简短回答，componentWillMount如何与React Hooks一起使用:

componentWillMount已弃用，被认为是遗留的。反应推荐:

通常，我们建议使用构造函数()来初始化状态。

现在，在Hook FAQ中，你会发现函数组件的类构造函数的等价是:

构造函数:函数组件不需要构造函数。你可以在useState调用中初始化这个状态。如果计算初始状态的开销很大，您可以将一个函数传递给useState。

componentWillMount的用法示例如下所示:

const MyComp = () => {
  const [state, setState] = useState(42) // set initial value directly in useState 
  const [state2, setState2] = useState(createInitVal) // call complex computation

  return <div>{state},{state2}</div>
};

const createInitVal = () => { /* ... complex computation or other logic */ return 42; };

2020-03-07 11:41:22

其他回答

你不能在钩子中使用任何现有的生命周期方法(componentDidMount, componentDidUpdate, componentWillUnmount等)。它们只能在类组件中使用。而Hooks只能用于功能组件。下面这句话来自React文档:

如果你熟悉React类的生命周期方法，你可以把useEffect Hook看作componentDidMount、componentDidUpdate和componentWillUnmount的组合。

建议是，可以在功能组件中从类组件中模拟这些生命周期方法。

componentDidMount中的代码在组件挂载时运行一次。useEffect钩子等价于此行为是

useEffect(() => {
  // Your code here
}, []);

注意这里的第二个参数(空数组)。这将只运行一次。

如果没有第二个参数，useEffect钩子将在组件的每次渲染时被调用，这可能是危险的。

useEffect(() => {
  // Your code here
});

componentWillUnmount用于清理(比如删除事件监听器，取消定时器等)。假设您正在componentDidMount中添加一个事件侦听器，并在componentWillUnmount中删除它，如下所示。

componentDidMount() {
  window.addEventListener('mousemove', () => {})
}

componentWillUnmount() {
  window.removeEventListener('mousemove', () => {})
}

与上述代码等价的钩子如下所示

useEffect(() => {
  window.addEventListener('mousemove', () => {});

  // returned function will be called on component unmount 
  return () => {
    window.removeEventListener('mousemove', () => {})
  }
}, [])

2018-11-25 06:26:25

useLayoutEffect可以用一个空的观察者集([])来完成这一点，如果功能实际上类似componentWillMount——它将在第一个内容到达DOM之前运行——尽管实际上有两个更新，但它们在绘制到屏幕之前是同步的。

例如:


function MyComponent({ ...andItsProps }) {
     useLayoutEffect(()=> {
          console.log('I am about to render!');
     },[]);

     return (<div>some content</div>);
}

与useState相比，使用初始化器/setter或useEffect的好处是，尽管它可以计算一个渲染传递，但用户不会注意到DOM的实际重新渲染，并且它是在第一次明显的渲染之前运行的，而useEffect则不是这样。缺点当然是在你的第一次渲染中有轻微的延迟，因为在绘制到屏幕之前必须进行检查/更新。不过，这确实取决于您的用例。

我个人认为，useMemo在一些特定的情况下是很好的，当你需要做一些沉重的事情时——只要你记住这是例外与规范。

2019-04-19 21:34:49

对于大多数人来说，这可能很清楚，但请记住，在函数组件体内调用的函数充当beforeRender。这并没有回答在ComponentWillMount上运行代码的问题(在第一次渲染之前)，但由于它是相关的，可能会帮助其他人，所以我把它留在这里。

const MyComponent = () => {
  const [counter, setCounter] = useState(0)
  
  useEffect(() => {
    console.log('after render')
  })

  const iterate = () => {
    setCounter(prevCounter => prevCounter+1)
  }

  const beforeRender = () => {
    console.log('before render')
  }

  beforeRender()

  return (
    <div>
      <div>{counter}</div>
      <button onClick={iterate}>Re-render</button>
    </div>
  )
}

export default MyComponent

2020-11-02 14:21:31

这是我如何使用useRef钩子模拟函数组件中的构造函数的方式:

function Component(props) {
    const willMount = useRef(true);
    if (willMount.current) {
        console.log('This runs only once before rendering the component.');
        willMount.current = false;        
    }

    return (<h1>Meow world!</h1>);
}

下面是生命周期的例子:

function RenderLog(props) {
    console.log('Render log: ' + props.children);
    return (<>{props.children}</>);
}

function Component(props) {

    console.log('Body');
    const [count, setCount] = useState(0);
    const willMount = useRef(true);

    if (willMount.current) {
        console.log('First time load (it runs only once)');
        setCount(2);
        willMount.current = false;
    } else {
        console.log('Repeated load');
    }

    useEffect(() => {
        console.log('Component did mount (it runs only once)');
        return () => console.log('Component will unmount');
    }, []);

    useEffect(() => {
        console.log('Component did update');
    });

    useEffect(() => {
        console.log('Component will receive props');
    }, [count]);


    return (
        <>
        <h1>{count}</h1>
        <RenderLog>{count}</RenderLog>
        </>
    );
}

[Log] Body
[Log] First time load (it runs only once)
[Log] Body
[Log] Repeated load
[Log] Render log: 2
[Log] Component did mount (it runs only once)
[Log] Component did update
[Log] Component will receive props

当然，Class组件没有Body步骤，由于函数和类的概念不同，不可能进行1:1的模拟。

2020-03-26 11:45:20