浅谈react(1)三大属性

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


下一篇:react _this2.setState is not a function报错