本文转载自微信公众号《JS日报》，作者慧慧。转载本文请联系JS每日一问公众号。1.类组件类组件，顾名思义，就是用ES6类的形式写的。这个类必须继承React.Component。如果想访问父组件传过来的参数，可以使用this.props来访问。组件中必须实现render方法，return返回React对象，如下：.name}}}2.函数组件函数组件，顾名思义就是通过函数的写法实现一个React组件，这是React中最简单的组件定义方式functionWelcome(props){return

Hello,{props.name}

;}函数的第一个参数是props，用于接收父组件传过来的参数。3.区别对于两种React组件来说，区别主要分为以下几个大方向：写表单状态管理生命周期调用方法获取渲染两种写值形式最明显的区别在于写的形式不同。同一功能的实现可以分别对应类组件和功能组件的写法。函数组件：functionWelcome(props){return

Hello,{props.name}

;}类组件：cassWelcomeextendsReact.Component{constructor(props){super(props)}render(){return

你好，{this.props.name}

}}状态管理在hooks出来之前，功能组件都是无状态组件，无法保持组件的状态。与类组件不同的是，如果想通过调用setState来管理state状态，可以使用useState，如下：constFunctionalComponent=()=>{const[count,setCount]=React.useState(0);return();};在使用hooks的情况下，一般如果函数组件调用state，需要创建一个class组件或者state提升到你的父组件，然后通过props对象传递给子组件生命周期在函数组件中，有没有生命周期，因为这些生命周期钩子来自于继承的React.Component所以，如果使用生命周期，只能使用类组件，但是函数组件也可以使用useEffect来代替生命周期。下面是一个简单的例子：constFunctionalComponent=()=>{useEffect(()=>{console.log("Hello");},[]);return

Hello,World

;};上面的简单例子对应类组件中的componentDidMount生命周期如果在useEffect回调函数中返回一个函数，返回函数会在组件卸载时执行，就像componentWillUnmountconstFunctionalComponent=()=>{React.useEffect(()=>{return()=>{console.log("再见");};},[]);return

再见，世界

;};如果call方法是一个函数组件，调用就是执行函数：//你的代码functionSayHi(){return

Hello,React

}//React内部constresult=SayHi(props)//?

Hello,React

如果是类组件，需要实例化组件，然后调用实例对象的render方法：//你的代码classSayHiextendsReact.Component{render(){return

Hello,React

}}//React内部constinstance=newSayHi(props)//?SayHi{}constresult=instance.render()//?

Hello,React

获取渲染值先举个例子函数组件对应如下：functionProfilePage(props){constshowMessage=()=>{alert('Followed'+props.user);}constandleClick=()=>{setTimeout(showMessage,3000);}return(Follow)}类组件对应到以下内容：classProfilePageextendsReact.Component{showMessage(){alert('Followed'+this.props.user);}handleClick(){setTimeout(this.showMessage.bind(this),3000);}render(){returnFollow}}两者好像实现了一样的功能，但是在class组件中，输出this.props.user，Props在React中是不可变的所以它永远不会改变，但this总是可变的，这样你就可以在渲染和生命周期函数中读取新版本，所以如果我们的组件在请求运行时更新this.props，它就会改变。showMessage方法是从“最新”的props中读取用户，而function组件本身没有这个，props也没有变化，所以同样的点击，alert的内容还是之前的内容总结两个组件都有自己的自身的优点缺点函数式组件的语法更短更简单，这使得开发、理解和测试更容易，而类组件也可能因为大量使用this而变得混乱