函数组件内的 ReactJS 生命周期方法

Question

我不想在类中编写组件，而是使用函数语法。

如何覆盖 componentDidMount ， componentWillMount 内部功能组件？

甚至可能吗？

 const grid = (props) => {
    console.log(props);
    let {skuRules} = props;

    const componentDidMount = () => {
        if(!props.fetched) {
            props.fetchRules();
        }
        console.log('mount it!');
    };
    return(
        <Content title="Promotions" breadcrumbs={breadcrumbs} fetched={skuRules.fetched}>
            <Box title="Sku Promotion">
                <ActionButtons buttons={actionButtons} />
                <SkuRuleGrid
                    data={skuRules.payload}
                    fetch={props.fetchSkuRules}
                />
            </Box>
        </Content>
    )
}

原文由 Aftab Naveed 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

编辑： 随着 Hooks 的引入，可以实现生命周期类型的行为以及功能组件中的状态。目前

Hooks 是一个新的特性提议，它允许你在不编写类的情况下使用状态和其他 React 特性。它们作为 v16.8.0 的一部分在 React 中发布

useEffect 钩子可用于复制生命周期行为，而 useState 可用于将状态存储在功能组件中。

基本语法：

 useEffect(callbackFunction, [dependentProps]) => cleanupFunction

您可以在钩子中实现您的用例，例如

const grid = (props) => {
    console.log(props);
    let {skuRules} = props;

    useEffect(() => {
        if(!props.fetched) {
            props.fetchRules();
        }
        console.log('mount it!');
    }, []); // passing an empty array as second argument triggers the callback in useEffect only after the initial render thus replicating `componentDidMount` lifecycle behaviour

    return(
        <Content title="Promotions" breadcrumbs={breadcrumbs} fetched={skuRules.fetched}>
            <Box title="Sku Promotion">
                <ActionButtons buttons={actionButtons} />
                <SkuRuleGrid
                    data={skuRules.payload}
                    fetch={props.fetchSkuRules}
                />
            </Box>
        </Content>
    )
}

useEffect 还可以返回一个函数，该函数将在组件卸载时运行。这可用于取消订阅侦听器，复制 componentWillUnmount 的行为：

例如：componentWillUnmount

 useEffect(() => {
    window.addEventListener('unhandledRejection', handler);
    return () => {
       window.removeEventListener('unhandledRejection', handler);
    }
}, [])

要使 useEffect 以特定事件为条件，您可以为其提供一组值以检查更改：

例如：componentDidUpdate

 componentDidUpdate(prevProps, prevState) {
     const { counter } = this.props;
     if (this.props.counter !== prevState.counter) {
      // some action here
     }
}

挂钩等效

useEffect(() => {
     // action here
}, [props.counter]); // checks for changes in the values in this array

如果包含此数组，请确保包含组件范围内随时间变化的所有值（道具、状态），否则您最终可能会引用先前渲染中的值。

使用 useEffect 有一些微妙之处；查看 API Here 。

---

v16.7.0之前

函数组件的属性是它们无法访问 Reacts 生命周期函数或 this 关键字。如果要使用生命周期功能，则需要扩展 React.Component 类。

 class Grid extends React.Component  {
    constructor(props) {
       super(props)
    }

    componentDidMount () {
        if(!this.props.fetched) {
            this.props.fetchRules();
        }
        console.log('mount it!');
    }
    render() {
    return(
        <Content title="Promotions" breadcrumbs={breadcrumbs} fetched={skuRules.fetched}>
            <Box title="Sku Promotion">
                <ActionButtons buttons={actionButtons} />
                <SkuRuleGrid
                    data={skuRules.payload}
                    fetch={props.fetchSkuRules}
                />
            </Box>
        </Content>
    )
  }
}

当您只想渲染组件而不需要额外的逻辑时，函数组件很有用。

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用 react-pure-lifecycle 为功能组件添加生命周期功能。

例子：

 import React, { Component } from 'react';
import lifecycle from 'react-pure-lifecycle';

const methods = {
  componentDidMount(props) {
    console.log('I mounted! Here are my props: ', props);
  }
};

const Channels = props => (
<h1>Hello</h1>
)

export default lifecycle(methods)(Channels);

原文由 Yohann 发布，翻译遵循 CC BY-SA 4.0 许可协议