快捷搜索:  as

react组件浅谈

组件属性

props

组件的属性, 主要感化是让应用该组件的父组件可以传入参数来设置设置设备摆设摆设该组件。它是外部传进来的设置设置设备摆设摆设参数,组件内部无法节制也无法改动。当外部组件主动传入新的 props可进行改动

state

组件当前的状态,根据state的值出现UI,当数据发生改变的时刻经由过程render进行衬着,用于组件保存、节制、改动自己的可变状态。state 在组件内部初始化,组件自身经由过程this.setState进行触发改动,而外部不能造访也不能改动

无状态组件

优点

语法简洁

占用内存小,扩展性好

毛病

无生命周期,this变量为undefine不能应用

创建组件类

组件类名第一个字母应大年夜写,并且只能包孕一个顶层标签

React.createClass

对付状态的处置惩罚应用getInitialState函数进行设置初始值

应用React.createClass会自动绑定this

extends React.Component

extends React.Component 中this必要本武艺动绑定,经由过程es6的bind进行绑定,

在构造函数中绑定:

constructor(props){

super(props);

this.state={Message:"Welcome World !"};

this.Attention=this.Attention.bind(this);

}

在render中绑定:

render(){

return(

{this.state.Message}

);

舍弃了getInitailState函数

着末

- 组件尽可能地少状态使得组件逻辑就越轻易掩护。

- 当变动这个状态(数据)必要更新组件 UI 的就可以觉得是 state,

下面这些可以觉得不是状态:

可谋略的数据(比如一个数组的长度)和 props 重复的数据(除非这个数据是要做变化的)

您可能还会对下面的文章感兴趣: