React 基础笔记 03

受控组件和非受控组件

1. 受控组件

• HTML 中的表单元素是可输入的，也就是有自己的可变状态
• 而 React 中可变状态通常保存在 state 中，并且只能通过 setState() 方法来修改
• React 讲 state 与表单元素值 value 绑定在一起，有 state 的值来控制表单元素的值
• 受控组件：值受到 react 控制的表单元素

2. 非受控组件

• 调用 React.createRef() 方法创建 ref 对象
• 将创建好的 ref 对象添加到文本框中
• 通过 ref 对象获取到文本框的值
• 非受控组件： 表单组件没有 value prop 就可以称为非受控组件

组件通讯的方式

1. 父子组件通讯方式

• 传递数据(父传子)与传递方法(子传父)
• ref标记 (父组件拿到子组件的引用，从而调用子组件的方法)，在父组件中清除子组件的input输入框的value值。this.refs.form.reset()

import React, { useState } from 'react'
import './app.css'

function App() {
  const [show,setShow] = useState(true)
  const handleClick = () => {
    console.log("父组件")
    setShow(!show)
  }
  return (
    <div>
      <Nav event={handleClick}/>
      {show ? <Sider/> : ''}
    </div>
  )
}

function Nav(props) {
  const handClick = (e) =>{
    console.log("子组件")
    props.event()
  }
  return (
    <div>
      <button onClick={handClick}>点击</button>
      <div>nav</div>
    </div>
  )
}

function Sider() {
  return (
    <div>
      <ul>
        <li>列表1</li>
        <li>列表2</li>
      </ul>
    </div>
  )
}


export default App

2. 非父子组件通信方式

• 状态提升(中间人模式)

  • React中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件

上.在父组件上改变这个状态然后通过props分发给子组件.

• 发布订阅模式实现

• context状态树传参

生命周期

1. 初始化阶段

• 初始化阶段

  • componentWillMount:render 之前最后一次修改状态的机会
  • render: 只能访问 this.props 和 this.state, 不允许修改状态和 DOM 输出
  • componentDidMount: 成功 render 并渲染完成真实 DOM 之后触发，可以修改 DOM

• 运行中状态

  • componentWillReceiveProps: 父组件修改属性触发
  • shouldComponentUpadte： 返回 false 会阻止 render 调用
  • componentWillUpadte: 不能修改属性和状态
  • render: 只能访问 this.props 和 this.state, 不允许修改状态和 DOM 输出
  • componentDidUpdate: 可以修改 DOM

• 销毁状态

  • componentWillUnmount: 删除组件之前进行清理操作，比如计时器和事件监听

老生命周期的问题

1. componentWillMount 在 ssr 中这个方法将会被多次调用，所以会重复触发多遍，同时在这里如果绑定事件，将无法解绑，导致内存泄漏，变得不够安全高效逐步废弃。

2. componentWillReceiveProps 外部组件多次频繁更新传入多次不同的 props，会导致不必要的异步请求。

3. componetWillupdate 更新前记录 DOM 状态, 可能会做一些处理，与componentDidUpdate相隔时间如果过 长，会导致状态不太行。

新生命周期的替代

1. getDerivedStateFromProps 第一次的初始化组件以及后续的更新过程中(包括自身状态更新以及父传子) ，

返回一个对象作为新的 state，返回 null 则说明不需要在这里更新 state。

2. getSnapshotBeforeUpdate 取代了 componetWillUpdate ,触发时间为update发生的时候，在render之后

dom 渲染之前返回一个值，作为componentDidUpdate的第三个参数。

---

• @Title: React 基础学习 03
• @Content: React
• @Autor: ling.wang
• @StudyDate: 2022-05-22
• @WritingDate: 2022-05-22