无状态组件

  • A+
所属分类:React
 无状态组件 当一个普通组件只有render时可以用无状态  无状态组件性能高

一 、有状态组件 (stateful components)

         平时用的大部分是 有状态组件

        写法:

        

import React,{Component} from 'react';

export default class Bottom extends Component{
constructor(props){
super(props);
this.sayHi = this.sayHi.bind(this)//记得绑定this,否则this指向可能会出错
}

sayHi(){
let {name} = this.props
console.log(`Hi ${name}`);
}
render(){
let {name} = this.props
let{sayHi} =this;
return(
<div>
<h1>{`Hello, ${name}`}</h1>
<button onClick ={sayHi}>Say Hi</button>
</div>
)
}

}

二、无状态组件 (stateless components)

它是一种函数式组件,没有state, 接收Props,渲染DOM,而不关注其他逻辑

写法:

import React,{Component} from 'react';
export default function Bottom(props){
let{name} = props
const sayHi = () => {
console.log(`Hi ${name}`);
}
return (
<div>
<h1>Hello, {name}</h1>
<button onClick ={sayHi}>Say Hi</button>
</div>
)
}

两都在性能方面比较,无状态组件性能更高些。

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的QQ
  • 我的QQ扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: