state
理解
- state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
- 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
强烈注意
- 组件中render方法中的this为组件实例对象
- 组件自定义的方法中this为undefined,如何解决?
下面的案例 changweather 直接调用 那么this 指向 window
下面的代码解决了this 指向问题, changeWeather 函数是个赋值语句且用上了箭头函数(箭头函数this 指向外围的)
- 强制绑定this: 通过函数对象的bind()
- 箭头函数
- 状态数据,不能直接修改或更新
setState
必须写成对象
render 内拿到返回值在进行更改 第一次被调用,n次更新数据后展示
render
构造器 => 初始化状态 render => 根据状态值展示 changeWeather => 更新数据
setState 的简写方式
由于工作中的程序员不可能写完整的构造器代码,于是出现了简写的构造器代码
props
只读属性
理解
- 每个组件对象都会有props(properties的简写)属性
- 组件标签的所有属性都保存在props中
作用
- 通过标签属性从组件外向组件内传递变化的数据
- 注意: 组件内部不要修改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 被调用的次数,第一次初始化第二次更新时先清空再更新状态
解决办法:将函数写在外面(但影响不大,了解即可)实际开发使用内联函数较多
-
在条件允许情况下避免字符串ref
-
回调函数ref稍微麻烦
-
createRef 是拓展