react中类组件和函数式组件中有什么不一样?

20190306期

react中类组件和函数式组件中有什么不一样?

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

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

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

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

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
}
复制代码

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

纯函数组件的特色:

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

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

使用场景

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

总结

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