使用箭头功能反应ES6组件

Question

反应很新，我有一个类似的课程：

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

  );             
}

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

编辑：

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

谢谢，桑索什

Answer 1

你不能

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

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

请参见下面的示例。

class Example extends React.Component {

   componentDidMount(){
     //code here
   }

}

这是一个很好的答案，解释了区别以及何时在类组件上使用功能。

从React 16.8更新

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

如果希望实现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的类。