码迷,mamicode.com
首页 > 其他好文 > 详细

react的3种组件

时间:2019-11-07 15:18:32      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:继承   div   stat   了解   实例   构造函数   import   struct   idm   

推荐阅读: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种组件

标签:继承   div   stat   了解   实例   构造函数   import   struct   idm   

原文地址:https://www.cnblogs.com/amiezhang/p/11811816.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!