第209题(2020-05-09)：class 组件与函数式组件的区别?(拼多多）

[qappleh]

[qappleh]

在react中创建组件的形式有三种

• 纯函数式定义的无状态组件
• React.createClass 定义的组件
• Extends React.Component 定义的组件

今天我们要聊的是纯函数式定义的无状态组件及类组件的到底有什么不同, 分别在什么场景下适合使用

首先我们来看一下用上述方法如何来创建一个组件

1. Extends React.Component 定义的组件

React.Component是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，最终会取代React.createClass形式

class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            text: props.initialValue || 'placeholder'
        };
        // 手动绑定this
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(event) {
        this.setState({
            text: event.target.value
        });
    }
    render() {
        return (
            <div>
                <input value={this.state.text} onChange={this.handleChange}/>
            </div>
        );
    }
}
Demo.propTypes = {
    initialValue: React.PropTypes.string
}

2. 纯函数式定义的无状态组件

纯函数组件的特点:

• 组件不会被实例化,整体渲染性能得到提升
• 组件不能访问this对象
• 组件无法访问生命周期的方法
• 无状态组件只能访问输入的props,无副作用

function DemoComponent(props) {
  return <div>Hello {props.name}</div>
}
ReactDOM.render(<DemoComponent name="每日一题" />, mountNode) 

使用场景

以类形式创建的组件不用多说，该怎么用还怎么用, 这里说一纯函数组件, 纯函数组件被鼓励在大型项目中尽可能以简单的写法来分割原本庞大的组件，未来React也会这种面向无状态组件在譬如无意义的检查和内存分配领域进行一系列优化，所以只要有可能，尽量使用无状态组件

总结

• react中有三种创建组件的形式
• 纯函数不会被实例化，不能访问this，没有生命周期
• 尽可能的使用纯函数拆分复杂型组件

[vkboo]

• 写法不同，类组件是类是一个构造函数，在react内部需要被实例化；函数式组件是一个普通的函数，不需要被实例化，没有实例
• 类组件有自己的生命周期，函数式组件只能通过useEffecthook模拟实现类生命周期的概念
• ref可以直接引用类组件，并调用到类组件的实例；ref不能直接引用函数式组件，需要通过React.forwardRef进行转发
• 函数式组件可以使用Hooks，类组件不能
• 错误边界只能通过类组件才能实现