使用箭头函数响应 ES6 组件

Question

很新的反应，我有一个 class 像：

export const Checkbox = ({ label, className }) => {
  ....
  .... 
  return(
    .............
    .............

  );             
}

在这样的class中如何指定添加componentDidMount和componentWillReceiveProps？

编辑：

我有一个外行的疑问，为复选框创建包装器反应组件的正确方法是什么？功能组件还是从组件扩展？如果我创建一个 Checkbox 包装器组件供其他人使用，他们是否可以从他们的页面连接到商店（比如 redux）？

谢谢，桑托斯

Answer 1

你不能。如果您需要生命周期方法，您应该创建一个扩展 PureComponent 或 Component 的 class。

Answer 2

你不能。

这些是功能组件，不支持 React 的生命周期方法。

如果你想使用 React 的生命周期方法，你需要一个 class 继承自 React.Component

参见下面的示例。

class Example extends React.Component {
    
   componentDidMount(){
     //code here
   }
    
}

解释差异以及何时在 class 组件上使用功能。

从 React 16.8 更新

生命周期方法现在可以通过引入 hooks 来使用。

如果您希望实现 componentDidMount，您可以使用 useEffect 钩子并传递一个空数组作为第二个参数。示例如下所示。

const Example = () => {
  React.useEffect(() => {
    // do stuff here
  }, []);
}

Answer 3

你不能。

如果你想使用 React 的生命周期方法，你需要一个继承自 React.Component 的 class。

export class Checkbox extends React.Component {
    componentDidMount() {
        ....
    }

    render() {
        const { label, className } = this.props;
        ....
    }
}

使用箭头函数响应 ES6 组件

React ES6 components using arrow functions

javascript

reactjs

es6-class

从 React 16.8 更新