JS每日一题: react中类组件和函数式组件中有什么不同?

Posted 2021-04-09 JS每日一题

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，没有生命周期

• 尽可能的使用纯函数拆分复杂型组件

最近答题

基友噢如果喜欢，可以分享给好基友噢如果喜欢，可以分享给好基友噢

关注「JS每日一题」，参与答题！