尚硅谷笔记——React组件的三大属性props、state、ref

state

 理解

1. state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
2. 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

 强烈注意

1. 组件中render方法中的this为组件实例对象
2. 组件自定义的方法中this为undefined，如何解决？

下面的案例 changweather 直接调用 那么this 指向 window

下面的代码解决了this 指向问题, changeWeather 函数是个赋值语句且用上了箭头函数（箭头函数this 指向外围的）

1. 强制绑定this: 通过函数对象的bind()
   1. 箭头函数
2. 状态数据，不能直接修改或更新

setState

必须写成对象

render 内拿到返回值在进行更改 第一次被调用，n次更新数据后展示

render

构造器 => 初始化状态 render => 根据状态值展示 changeWeather => 更新数据

setState 的简写方式

由于工作中的程序员不可能写完整的构造器代码，于是出现了简写的构造器代码

 

props

只读属性

理解

1. 每个组件对象都会有props(properties的简写)属性
2. 组件标签的所有属性都保存在props中

作用

1. 通过标签属性从组件外向组件内传递变化的数据
2. 注意: 组件内部不要修改props数据

下面的例子是组件修相同，而里面数据不一样（需要props传数据）person 类实例对象中有props 属性，可以直接调用 this.props

下面代码要提前引入 propTypes 文件，对props中的属性值进行类型限制和必要性限制

 

 复习——展开运算符 ...

 

props 简写方式

 

函数式组件使用props

refs

 组件内的标签可以定义ref属性来标识自己

回调函数形式的 ref

c = > this.input1 = c 是回调函数的简写

原本：ref={(currentNode) => {this.input = currentNode}; console.log('@', currentNode)}

 

 

 

回调函数ref中调用次数的问题

ref={(currentNode) => {this.input = currentNode}; console.log('@', currentNode)}

 

上面的内联函数会造成 页面更新时 render 被调用的次数，第一次初始化第二次更新时先清空再更新状态

解决办法：将函数写在外面（但影响不大，了解即可）实际开发使用内联函数较多

 

1. 在条件允许情况下避免字符串ref

2. 回调函数ref稍微麻烦

3. createRef 是拓展