浅谈react
本章目录
前言
- 本篇主要来谈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中某个状态时不能直接修改，要重新创建这个状态。
- 今天看到一句话，顺便记下来吧
- 你的未来，时刻因为此时的努力而改变