一 组件props

作用：给组件传递数据，是React组件通讯的基础

使用步骤：

1、传递props：在组件标签上添加属性

2、接收props：通过参数拿到

推荐：使用解构，接收props

二 父子组件通讯

原则：谁的数据谁负责

1、父=》子 （传递props）

父组件提供数据，通过props传递给子组件使用

2、子=》父

a、父组件准备修改数据的函数，传递给子组件

b、子组件调用函数，将数据作为参数回传给父组件

 三 兄弟组件通讯

1、找到父组件，提供共享数据

2、使用数据，例如聊天工具左边好友列表，右边聊天窗口，展示好友名称（父到子通讯）

3、修改数据，切换选中好友（子到父通讯）

状态提升：如果两个兄弟组件要通讯，就把共享数据提升到公共父组件中

四 后代关系组件通讯

Context（上下文）：范围，无视组件层级关系，跨组件通讯

1、创建Context对象

2、划定范围，提供共享数据

3、范围内的组件，获取共享数据 

五 useEffect的使用

useEffect的作用：在组件生命周期的三个阶段（挂载、更新、卸载），执行网络请求、浏览器API等操作

这些操作，也叫：副作用（side effects），用于连接外部系统

语法：useEffect(Effect函数，依赖项数组)

　　　　　　    副作用代码　　控制Effect函数的执行时机，可选

import { useEffect, useState } from "react";
import "./App.scss";

const ChatRoom = ({ roomId }) => {
  console.log("当前房间", roomId);

  // useEffect(() => {
  //   console.log("建立连接：music房间");
  // }, []);

  // useEffect(() => {
  //   console.log(`建立连接：${roomId}房间`);
  // }, [roomId]);

  useEffect(() => {
    return () => {
      console.log("断开连接");
    };
  }, []);

  return (
    <div className="chat-room">
      <h1>欢迎来到{roomId}房间！</h1>
    </div>
  );
};

const App = () => {
  const [roomId, setRoomId] = useState("music");
  const [chatting, setChatting] = useState(true);
  return (
    <div className="app">
      <button onClick={() => setChatting(!chatting)}>
        {chatting ? "退出聊天" : "开始聊天"}
      </button>
      {chatting ? (
        <div>
          <label>
            选择聊天室：
            <select value={roomId} onChange={(e) => setRoomId(e.target.value)}>
              <option value="music">music</option>
              <option value="travel">travel</option>
              <option value="sports">sports</option>
            </select>
            <ChatRoom roomId={roomId} />
          </label>
        </div>
      ) : (
        <p>点击【开始聊天】按钮，开始吧</p>
      )}
    </div>
  );
};

export default App;
View Code

 5.1 useEffect的扩展

1、推荐：一个useEffect负责一个完整功能；执行过程：挂在：1，更新：2、1，卸载：2

2、依赖性：useEffect(()=>{/*可变值*/},[可变值1，可变值2])

需要作为依赖项的值：Effect中用到的可变值，比如，props/state/组件内创建的变量等

不需要作为依赖项的值：组件外创建的或导入的变量、函数等 

5.3 useEffect发送请求

n切换node版本： n 15.0.1

本地起json服务：npx json-server ./data.json --port 8080

新建终端，安装axios： npm i axios

场景：组件初次渲染时，发送请求获取数据

步骤：1.调用useEffect，依赖项为空数组；2.创建新函数，在该函数上使用async，并调用；3.发送请求，通过await获取到数据，然后使用

 注意：1、不要直接在Effect函数前面添加async关键字，因为它是同步的

2、useEffect：只处理跟组件挂载、更新、卸载相关的请求代码；事件处理程序：处理点击等用户操作时的请求代码

 六 React Hooks解释和使用规则

React Hooks是以use开头的函数，比如，useState，useEffect，useContext等

Hooks（钩子）：为组件提供不同的额React特性，比如，useSate Hook为组件提供状态

使用规则：只能在组件的顶层调用，不能嵌套在if、for、其他函数中

原理：React组件依赖Hooks的调用顺序，必须保证所有Hooks，在每次渲染时，调用顺序一致。

七 实践

展示或隐藏频道弹窗，渲染频道数据，移除或添加频道