自从上节课内容结束之后。我们终于算是学完了react组件的三大属性。其实要说起来大家觉得是不是也没有我们想象中那么难？

那又有人要说了，我学完了react组件的三大属性了那我react是不是就可以为所欲为了？那怎么可能呢？你回想一下你截止到目前学到的东西，然后让你写一个某宝的前端页面你写得出来吗？

react组件的三大属性虽然是重点没错但是这是基础。就好像你刚刚学会了 26 个英文字母，然后让你写一篇 800 个词的英语作文肯定是不可能的。

正所谓，温故而知新，可以为师矣。可能有人以为我是个专业的react开发，这是我写得教程。但是实际上我现在写得这些也只是我的学习笔记。所以说我们这节课先来回顾一下组件三大属性的一些要点。

state属性

我们知道最难的属性就是组件的state属性。那么state中我们都学习了些什呢？

对state的理解

  • state是一个状态属性，这个属性中存放着某些数据，通过更新state中的数据可以驱动页面重新渲染，从而使得页面可以动态加载和更新。

  • state在类组件的实例对象上

  • 一个组件如果拥有state，那么该组件则是复杂组件

初始化state

  • state的类型是一个对象
  • satte初始化要借助构造器，或者直接使用赋值语句
  • 如果使用构造器方法需要接受props并且传给super方法
  • 需要通过this来调用state

react事件绑定

  • 原生js添加点击事件有三种方法
  • addEventListener方法
  • onclick方法

  • onclick属性配合回调函数

  • react中允许使用原生js中的方法

  • react不推荐使用addEventListener和onclick，大力推崇onClick属性配合回调函数
  • react中onClick属性中click首字母必须大写
  • onClick属性不能用引号括起来，需要用{}括起来
  • onClick属性必须是函数，所以函数名后面不可以加()

类方法中的this指向

  • react类组件中推荐将类组件需要用到的函数全部包含在类里，以方法的形式来写
  • 类组件中的方法要通过this调用
  • 类方法赋值给变量或者作为事件监听的回调的话，对该方法的调用属于函数直接调用而不是通过类的实例对象调用
  • 类中所有方法都默认局部开启了strict模式
  • bind(this)做了两件事
  • 生成新函数

  • 修改新函数中的this指向

  • 实例对象调用属性和方法会先从自身查找，自身没有才会顺着原型链去查找原型对象

  • this.notify = this.notify.bind(this)是将原型对象上的notify方法生成新函数并修改this指向之后存放在实例对象自身

使用setState方法

  • react不支持直接修改state，必须通过setState方法来修改state
  • setState存放在React.Component的原型对象上
  • setState方法接收的参数是一个对象
  • setState方法并不是直接全局替换掉原来的state而是合并
  • 整个过程中类组件的构造器方法只被调用一次
  • render方法被调用1 + n次

简写state

  • 标准写法比较繁琐，在实际开发中会拖慢我们的进度，所以要进行精简
  • 精简后的代码结构分为三个部分，就目前来说，不需要构造器，至于后面要不要我们再说
  • 赋值语句直接初始化状态
  • render方法

  • 自定义方法，所有自定义方法全部使用赋值语句加箭头函数来写

  • 箭头函数自身没有this

  • 箭头函数中如果要使用this，那么就会去查找箭头函数外层的this并作为自己的this来使用

props属性

学习完了state属性之后，我们又开始了第二个属性props

props的基本应用

  • props是一个对象
  • props是通过外面往组件内传入数据
  • props在组件的实例对象上可以通过this调用
  • props可以在组件标签处通过标签属性传入

批量传入props

  • props可以在标签中使用展开运算符展开一个对象来批量传入属性
  • props在使用展开运算符时必须确保被展开对象中的属性和解构props时的变量一致才能正常取数
  • 展开运算符在原生js语法中不能展开对象
  • babel和react库支持仅在组件标签批量传入属性时展开对象

对props进行限制

  • 限制并不是必须的
  • 限制props必须引入prop-types
  • 限制可以避免一些不必要的错误
  • 限制有三种场景
  • 限制属性是否必须非空
  • 限制属性类型
  • 限制属性默认值
  • 限制属性类型为函数时，不能用function而要用func

简写props

  • propsTypes和defaultProps必须是组件类自身的属性，不是实例对象的属性
  • 用static关键字给类自身添加属性
  • props是只读的

类中构造器和props

  • 类组件不写构造器完全可以，而且能不写就尽量不写
  • 构造器中props传给super和不传给super的区别就是在构造器中能否通过this访问到props

函数式组件使用props

  • 函数式组件目前只能使用props
  • 函数式组件使用参数来接收props
  • 函数式组件可以限制props但是只能写在函数体外

refs属性

那么我们来回忆一下最后一个属性。

字符串形式的rfs

  • refs是一个收集各个标签ref属性来作为标识的一个对象
  • refs可以代替document.getElementById方法来获取页面节点
  • refs可以配合事件处理来完成相应的功能需求。

回调形式的refs

  • 回调式refs不会自动收集到this.refs中
  • 字符串式refs有问题，后期可能会废弃
  • 回调式refs所传入的ref属性是一个回调函数
  • 回调式refs是将传入的标签节点传入回调函数，并通过回调函数将标签节点挂在实例自身

回调式refs被调用的次数

  • 回调式refs会在页面第一次被渲染时调用一次
  • 如果回调式refs是内联函数形式，那么在state更新之后，会被重新调用两次
  • 内联函数形式的回调式refs调用次数对程序不会有影响
  • 类组件绑定函数的方式可以解决refs被多次调用的问题

使用createRef

  • createRef可以返回一个容器用于存放被ref属性标识的DOM节点
  • createRef返回的容器“专人专用”
  • 如果多个标签要被标识，就要创建多个容器

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/review_react_attr/