标签：继承 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>
}
标签：继承 div stat 了解 实例 构造函数 import struct idm
原文地址：https://www.cnblogs.com/amiezhang/p/11811816.html
