浅谈react(1)三大属性

浅谈react

• 浅谈react(2)生命周期，浅谈两个新钩子

---

前言

• 本篇主要来谈React的三大属性state、refs、props

---

一、React是什么

• 首先react是Facebook家出的一个开源的js库
• 一个声明式的可以动态构建界面的js库
• 声明式编码、组件化编码、高效、单向数据流

二、jsx

• 是一种js的语法扩展
• 是react提供的一种语法糖
• 全称是 javascript xml
• 便捷快速创建一个react虚拟DOM对象

三、react组件的创建方式

• 第一种，通过function来创建无状态的组件，这样创建的组件中this为undefined
• 第二种，通过es6中class来创建复杂的组件，this为该组件的实例，有状态

四、react三大属性之state

1、react把组件看作是一个状态机

• 状态的改变反映到UI的改变。通过与用户交互改变状态，然后渲染到UI

2、 react建议把state当作不可变的

• 不能通过this.state=XXX直接修改state
• state中的状态都应是不可变的，所以在需要更新state中某个状态时不能直接修改，要重新创建这个状态

3、用this.setState({})来更新状态时可能时异步的

• 当使用了this.setState时，react内部会将此次更新的状态放入一个队列中，而且react会为了性能将多次setState优化成一次操作。
• 同时this.props的更新可能也是异步的，所以我们不能同时依赖此时this.props和this.state的值去更新下一状态
• 如果必须要同时依赖此时的this.state和this.props更新下一个状态，那么就让setState接收一个函数而不是一个对象，这个函数的一个参数就是state,第二个参数是此次更新被应用的props

4、使用this.setState更新状态是合并的，而不是替换

• react会将我们调用setState时传入的对象合并到当前state，而不是用我们传入的对象替换state对象

五、react三大属性之props

• props是只读的
• 任何react组件都要像纯函数保护参数一样取保护自己的props不被修改
• propType用来对组件的props进行类型检查，需要引入prop-types库

六、react三大属性之refs

• refs提供给我们访问DOM节点，或者是react组件的实例的一种方式
• 不到万不得已不去使用refs,能用声明式完成就用声明是完成
• 三种使用refs的方式
  • 为被操作的组件实例添加ref=refName属性，在使用时可以通过this.refs.refName的方式，相当于找到真实dom然后进行操作（老版本，现已不建议使用）
  • 回调形式的refs,组件实例的ref属性传递一个回调函数ref=(item)=>{this.refName=item},这样会在实例的属性中存储对DOM节点的引用,使用时可通过this.refName来使用
  • React16.3中引入的最新方式，通过React.createRef()来创建refs,然后通过ref属性附加到组件实例上，this.newRef=React.createRef()，ref={this.newRef}。需要注意的是一个ref对应一个create

总结

• 需要注意的是，state不能被直接修改，setState更新state可能是异步的，同时在需要更新state中某个状态时不能直接修改，要重新创建这个状态。
• 今天看到一句话，顺便记下来吧
• 你的未来，时刻因为此时的努力而改变