Class 组件 实例三大核心属性

1. State

• 不能直接修改更新 state，react 不准。
• 状态在哪里，修改这个状态的方法就在那里

更新

需要使用 setState({ })

–且 react 的状态更新是异步的，并是说 setState 这个方法是异步的，而是引起的后续更新 react 自己搞的操作是异步的。

• 函数式的 setState
  • setState 第一个参数是个函数   且函数的参数就是 state 和 props.在 return 中   对状态进行更新。
  • 
• 对象式的 setState
  • 其实就是函数式 setState 的语法糖，但是更加常用
  • 
• **setState 还有第二个   参数   是一个回调函数，****相当于组件生命周期中的 componetDidUpdate，更新完成钩子。**
  • 
  • 此回调函数是 render 函数执行完成之后，才会执行的，所以里面可以获取到   异步更新后的实时状态
• 注意：
  • setState 是异步的，就是说上一行更新的 state，下一行拿到的不是最新值，只能在回调头得到。所以写方法时，setState 要统一最后执行，不能像 vue 那样，写太散了。
  • 一般 getList 方法中的 state 都需要通过 callback 去对更新后的 state 二次元处理，因为 getList 会被其他各种方法调用。(公司封装的 useStateStore 的 getState 解决了这个痛点)

扩展

state 写在类中就行，不用一定写在构造器中

–构造器调用 1 次

–render 调用 1+n 次   –setState({ })状态更新，第一次是初始化，后面的 n 次是状态更新。

–类方法调用   点几次调用几次

---

2. props

• 组件标签的所有属性都保持在 props 中
• 通过标签属性从组件外向组件内传递变化的数据
• 注意：组件内部不能修改 props 数据

用 vue 的思路理解： props 是父组件传递来的值，只读，不可以改，如果需要改，需要调用父组件的方法实现。

基础传递

–父组件-传

–子组件-取

{this.props.attr1}

批量传递

使用 babel 和 react 共同提供在   标签中可使用的语法:

• 批量传递也能接受到   组件标签之间的数据。这属性默认为 children。类似 vue 中的插槽。
• 
  • 标签体的内容也是一个特殊的标签属性
  • 通过：  this.props.children  可获取标签体内容

对 props 类型进行限制

现在直接启动 TypeScript 了，这种操作就没必要了。

-需要引入外部库

但推荐写在   类里面

**    要使用 static(静态) 关键字   声明 props 限制 。props 的限制属性就会加入到类本身中去**

---

–函数组件使用 props 属性

---

3. refs

– 组件内的标签可以定义**ref**  属性来标识自己，相当于就是原生中   的 id**  **

– 获取到了 就是真实 DOM(节点对象)。

1. 过时的 String 类型的 ref

–  ref={ref 名}

–获取： this.refs.ref 名     –效率不高,不推荐了

2. 回调形式的 ref

–

–详解

–箭头函数的形式实现，react 会自动帮你回调 ref 关键字里的函数。c 就是当前标签的节点对象，把 c  赋给   组件实例中的新属性 input。

–使用

3. ref  函数更新调用问题

• 初始化的时候，调用一次。获取元素节点
• 但是更新 ref 中的函数会被执行两次。第一次是 null，第二次是新的元素节点（官方说几乎没有影响，）
  • 因为第一次时会回收掉原函数，所有结果为 null，第二次再调用函数，才是一个元素节点
• 但定义为 class 的绑定函数。可以解决这个问题，但也没啥必要
  • 
  • 

4. createRef 新版的官方推荐的

–实例添加 ref 属性。一个 createRef 只对应一个 ref 属性。复用的话后面的会覆盖前面的

–标签中调用，可获取节点对象

–打印 myref

–所以节点对象存在于 myref.current 中

5. 不要过度的使用 ref

绑定了事件的标签，完全可以在事件中，利用 event 事件对象获取参数。不至于频繁打标识

6. 受控组件与非受控组件

• 非受控组件,使用 ref

现用现取就是非受控

• 受控组件，不使用 ref

类似 vue 的双向绑定 就是受控组件。

• input 使用 react 封装的 onChange 事件（只要 input 的值改变 react 就会帮你回调这个事件）,获取元素节点的值
  • 注意只有 react 帮你回调时，函数中才拿得到 event 事件对象
  • 
  • 
  • 提交表单需要注意清除默认事件，不让页面刷新
    • 
  • **event.preventDefault() **   –阻止默认事件 (阻止表单提交)