react的3种组件

Posted amiezhang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react的3种组件相关的知识,希望对你有一定的参考价值。

推荐阅读: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> }

 

以上是关于react的3种组件的主要内容,如果未能解决你的问题,请参考以下文章

React 函数组件与class组件的区别

React 函数组件与class组件的区别

已解决在react+ts中 atnd 用 upload 组件报错Failed to execute ‘readAsArrayBuffer,param 1 is notof type Blob(代码片段

已解决在react+ts中 atnd 用 upload 组件报错Failed to execute ‘readAsArrayBuffer,param 1 is notof type Blob(代码片段

[译] 如何在React中写出更优秀的代码

是否有用于 React Function 组件的类型,包括返回片段、空值、字符串等?