使用箭头函数反应ES6组件

Question

非常新的反应，我有一个类：

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

  );             
}

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

编辑：

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

谢谢，Santhosh

Answer 1

你不能。

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

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

见下面的例子。

class Example extends React.Component {

   componentDidMount(){
     //code here
   }

}

Here is a good answer解释了这些差异以及何时使用功能性类组件。

UPDATE from React 16.8

生命周期方法现在可以与hooks的引入一起使用。

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

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

Answer 2

你不能。

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

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

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

Answer 3

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