react的3种组件

Posted 2020-11-30 amiezhang

推荐阅读：https://www.jianshu.com/p/2726b8654989

1. createClass

已不推荐使用，这里不再多讲。但你仍需要了解它，因为你可能会接触到一些旧项目，或者一些旧的开源项目，这些项目大都采用createClass写法。

var AppComponent = React.createClass({
   componentDidMount: function(){
       // 一些逻辑
   },
  ……
  render:function(){
      return (
       <div> 返回值最外层必须是闭合标签  </div>
     )
   }
})

 

2. class组件

其实就是createClass的es6的写法。

import React  from ‘react‘;
class AppComponent extends  React.Component {   // 定义一个继承于react顶层Component的新组件AppComponent
   constructor(props){
      super(props)            // super,调用父类构造函数改变this指向
   }
   render(){      
       return  <div> 
            返回值最外层必须是闭合标签  
      </div>
   }
}

 

3. stateless 组件

所谓stateless组件，也就是无状态组件。
这种react组件有一个特点，它没有生命周期方法，没有render方法，连state也没有,this也没有，也不需要实例化。

stateless组件本质是一个函数，它没有生命周期，也不需要实例化，没有this指向, 更轻盈，性能更加好。

这种组件是所有react组件中性能最好的组件类型。官方也推荐多用这种组件。

多用作纯展示的组件使用。

const AppComponent = (props) =>{
   // 一些逻辑
   return <div>
    这是一个干净纯洁的stateless组件
   </div>
}

 

配合useState使用

import {useState} from ‘react‘;

const AppComponent = (props) =>{
    const initState = {name: ‘test‘, age: 23}
    const [myState, setMyState] = useState(initState);
   // 一些逻辑
   return <div onClick={setMyState={name: ‘haha‘}}>
        {myState.name}
　　　　 {myState.age}
   </div>
}