学习React生命周期（Day:6）

任务：学习React生命周期

1、学习React16版本上的生命周期

首先，每个 React 组件都经历相同的生命周期：

当组件被添加到屏幕上时，它会进行组件的挂载。当组件接收到新的 props 或 state 时，通常是作为对交互的响应，它会进行组件的更新。当组件从屏幕上移除时，它会进行组件的卸载。这个在前面的内容中提到过，再说明一下

我通过下面这个时钟的例子来说明

import React from 'react';
export default class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
  //生命周期的挂载
  componentDidMount(){
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  //生命周期的卸载
  componentWillUnmount(){
    clearInterval(this.timerID);
  }
  tick(){
    this.setState({
      date: new Date()
    });
  }
  render (){
    return (
      <div>
        <h1>Hello,World</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>

    );
  }
}

这里涉及到了两种方法，分别是挂载和卸载在index.js中

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

这两部分组合起来就是将时钟传给root.render()了。然后React调用这部分来显示时间 constructor(props) { super(props); this.state = {date: new Date()}; } 如何render（）方法会用toLocaleTimeString这种方法来显示时间当屏幕有显示以后，React调用 componentDidMount() 这个方法，且设置一个计时器，每隔1s调用一下tick（）刷新一次界面一旦clock组件被移除，就会调用 componentWillUnmount()方法清空计时器

需要注意的是这个toLocaleTimeString()是 JavaScript 中的一个日期对象的方法，用于获取表示日期的时间部分的本地化字符串。它返回一个包含时、分、秒的字符串，这些值是根据本地化规则进行格式化的，与用户的地区和语言有关。这是我第一次遇见。

2、React的生命周期有哪些

2.1、Mounting（挂载阶段）: constructor(props): 组件被创建时调用，用于初始化状态和绑定方法。 static getDerivedStateFromProps(props, state): 在组件挂载前和每次接收到新的 props 时调用，用于更新 state。 render(): 渲染组件的内容。 componentDidMount(): 在组件被挂载到 DOM 后调用，可以进行数据获取或订阅。 2.2、Updating（更新阶段） static getDerivedStateFromProps(props, state): 同上，用于在组件接收新的 props 时更新 state。 shouldComponentUpdate(nextProps, nextState): 决定组件是否需要重新渲染，返回 true 或 false。 render(): 重新渲染组件的内容。 getSnapshotBeforeUpdate(prevProps, prevState): 在更新之前获取 DOM 快照，通常用于处理滚动位置等。 componentDidUpdate(prevProps, prevState, snapshot): 在组件更新后调用，可以执行一些副作用操作。 2.3、Unmounting（卸载阶段）: componentWillUnmount(): 在组件即将被卸载时调用，用于清理定时器、取消网络请求等。 2.4、Error Handling（错误处理）: static getDerivedStateFromError(error): 在子组件抛出错误时调用，用于更新 state 以显示错误信息。 componentDidCatch(error, info): 在组件的子组件树中捕获到错误时调用，可以记录错误信息。

以上是每个生命周期中的一些方法

3、响应式 Effect 的生命周期

与传统生命周期的不同：组件可以挂载、更新或卸载。Effect 只能做两件事：开始同步某些东西，然后停止同步它。 我们来看一个例子

import { useState, useEffect } from 'react';
import { createConnection } from './chat';

function ChatRoom({ roomId }) {// roomId 属性可能会随时间变化。
  //注意点：不要将与Effect无关的逻辑添加进来，每个effect应该代表一个独立的同步过程
  const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // State 可能随时间变化
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);// 这个 Effect 读取了 roomId
    connection.connect();
    return() => connection.disconnect();
  }, [roomId, serverUrl]);// 因此，你告诉 React 这个 Effect "依赖于" props 和 state
  return (
    <>
    <label>
      服务器 URL:{' '}
      <input
      value={serverUrl}
      onChange={ e=> setServerUrl(e.target.value)}
      />
    </label>
    <h1> 欢迎来到{roomId}房间！</h1>
    </>
  )

}
export default function App(){
  const [roomId,setRoomId] = useState('general');

  return(
    <>
    <label>
      选择聊天室：{''}
      <select
      value={roomId}
      onChange={e => setRoomId(e.target.value)}
      >
        <option value="general">所有</option>
        <option value="travel">旅游</option>
        <option value="music">音乐</option>
      </select>
    </label>
    <hr />
    <ChatRoom roomId={roomId} />

    </>
  );
}

export function createConnection(serverUrl,roomId){
    return {
        connect(){
            console.log('✅ 连接到 "' + roomId + '" 房间，位于' + serverUrl + '...');
        },
        disconnect(){
            console.log('❌ 断开 "' + roomId + '" 房间，位于' + serverUrl);
        }
    };
}

这是一个关于Effect同步的demo

一般来说：不要将与Effect无关的逻辑添加进来，每个effect应该代表一个独立的同步过程然后把roomId和Url全都作为了依赖项。需要注意的是：响应式值必须包含在依赖项中。

XJQ124 / Some-notes