React学习笔记（二）

React学习笔记（二）

---

---

前言

例如：B站学习笔记，记录知识点，方便复习。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、基础知识

1.输入框的双向绑定

代码如下（示例）：通过value属性绑定状态，通过onChange属性绑定状态同步的函数。

const [value,setValue] =  useState('')
<input value={value}
       onChange={(e)=>setValue(e.target.value)
       type='text'} />

2.获取DOM

代码如下（示例）：需要使用useRef钩子函数

const inputRef = useRef(null)
<input type='text' ref={inputRef} />
//渲染完毕之后（dom生成之后）才能使用
console.log(inputRef.current)
//输入框实现聚焦
inputRef.current.focus()

---

3.uuid随机生成id

uuid：通用唯一识别码（Universally Unique Identifier）

代码如下（示例）：需要使用uuid插件

//安装：
npm install uuid

//TS环境引入
import { v4 as uuidv4 } from 'uuid';
//js环境引入
const { v4: uuidv4 } = require('uuid');

//使用：
{
	id:uuidv4()
}

4.时间格式化Day.js

需要使用day.js插件，中文网地址： https://dayjs.fenxianglu.cn/category/#node-js

//安装：
npm install dayjs
//引入：
import {dayjs} from 'dayjs'
//使用：
{
	time:dayjs(new Date()).format('MM-DD hh:mm')
}

5.父传子

知识点：
1、父组件穿件数据 - 在子组件标签上绑定属性
2、子组件接收数据 - 子组件通过props参数接收数据
3、props可传递任意数据：数字、字符串、布尔值、数组、对象、函数、JSX
4、props是只读对象：子组件只能读取props中的数据，不能直接进行修改，父组件的数据只能由父组件修改
5、特殊的prop: children，把内容嵌套在子组件标签中，父组件会自动在名为children的prop属性中接收改内容。

function ParentApp() {
  const name = "父组件数据";
  return (
    <div>
      <p>父组件展示区域</p>
      <SonApp
        name={name}
        age={15}
        isTrue={false}
        list={["vue", "react"]}
        child={<span>this is span</span>}
        obj={{ name: "jack" }}
        cb={() => console.log("123")}
      >
        <span>子组件默认插槽</span>
      </SonApp>
    </div>
  );
}

function SonApp(props) {
  // props参数：是一个对象，包含了父组件传递过来的所有数据
  return (
    <div>
      <div>子组件展示区域:{props.name}</div>
      <div>子组件插槽区域：{props.children}</div>
    </div>
  );
}
export default ParentApp;

5.子传父

核心思路：在子组件中调用父组件中的函数并传递参数

import { useState } from "react";

function Son({ onGetMsg }) {
  const msg = "我是子组件的数据";
  return <button onClick={() => onGetMsg(msg)}>按钮</button>;
}

function Parent() {
  const [message, setMessage] = useState();
  const getMsg = (msg) => {
    setMessage(msg);
  };
  return (
    <div>
      this is Parent
      <Son onGetMsg={getMsg} />
      <div>父组件显示子组件数据：{message}</div>
    </div>
  );
}

export default Parent;

6.兄弟组件通信

核心思路：借助“状态提升”机制，通过父组件进行兄弟之间的数据传递
1、A组件先通过子传父的方式把数据传给父组件App
2、App拿到数据后通过父传子的方式再传递给B组件

import { useState } from "react";

function A({ onGetAMsg }) {
  const msg = "A中的数据";
  return (
    <div>
      <span>this is A</span>
      <button onClick={() => onGetAMsg(msg)}>A按钮</button>
    </div>
  );
}

function B({ data }) {
  return <div>this is B,即将显示：{data}</div>;
}

function Parent() {
  const [data, setData] = useState("");
  const getAMsg = (msg) => {
    setData(msg);
  };
  return (
    <div>
      <A onGetAMsg={getAMsg} />
      <B data={data} />
    </div>
  );
}
export default Parent;

7.Context跨层级组件通信

核心思路：借助“Context”机制
1、使用createContext方法创建一个上下文对象Ctx
2、在顶层组件（App）中通过Ctx.Provider组件提供数据
3、在底层组件（B）中通过useContext钩子函数获取消费数据

// A->B->C
import { createContext, useContext } from "react";
// >1、使用createContext方法创建一个上下文对象Ctx
const MsgContext = createContext();
// >2、在顶层组件（App）中通过Ctx.Provider组件提供数据
// >3、在底层组件（B）中通过useContext钩子函数获取消费数据

function A() {
  const msg = "this is a msg";
  return (
    <div>
      <MsgContext.Provider value={msg}>
        this is A <B />
      </MsgContext.Provider>
    </div>
  );
}
function B() {
  return (
    <div>
      this is B <C />
    </div>
  );
}
function C() {
  const msg = useContext(MsgContext);
  return <div>this is C,{msg}</div>;
}
export default A;

8.useEffect

概念理解：useEffect是一个React Hook函数，用于在React组件中创建不是由事件引起而是由渲染本身引起的操作，比如发送ajax请求，更改Dom等等
需求：在组件渲染完毕后，立刻从服务端获取频道列表数据并显示到页面中
语法：useEffect( ())=>{ } , [] )
参数1是一个函数，可称为副作用函数，在函数内部可以放置要执行的操作。
参数2是一个数组（可选参），在数组里放置依赖项，不同依赖项会影响第一个参数的执行。当是一个空数组时，副作用函数只会在组件渲染完毕后执行一次。

组件更新：点击按钮数字加1，数据变化导致页面更新，触发useEffect里的函数执行

useEffect-清除作用

需求：在son组件渲染时开启一个定时器，卸载该组件时清除这个定时器。

import { useEffect, useState } from "react";
function Son() {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log("定时器执行中....");
    }, 1000);
    // 不写return 卸载组件后定时器依旧继续执行
    return () => {
      clearInterval(timer);
    };
  }, []);
  return <div>this is son</div>;
}
function UseEffApp() {
  const [data, setData] = useState(0);
  const [show, setShow] = useState(true);
  const add = () => {
    setData(data + 1);
  };
  useEffect(() => {
    console.log("不写参数");
  }, [data]);
  return (
    <div>
      {data}
      {show && <Son />}
      <button onClick={add}>测试执行机制</button>
      <button onClick={() => setShow(false)}>卸载son组件</button>
    </div>
  );
}

export default UseEffApp;

9.自定义hook

封装自定义hook通用思路：
1、声明一个以use开头的函数
2、在函数体内封装可复用的逻辑
3、把组件中用到的状态或者回调return出去（对象或数组）
4、在哪个组件中要用到这个逻辑就执行这个函数，解构出来状态和回调函数进行使用

import { useState } from "react";

function useToggle() {
  const [show, setShow] = useState(true);
  const changeFun = () => setShow(!show);
  return {
    show,
    changeFun,
  };
}

function CustomeHook() {
  const { show, changeFun } = useToggle();

  return (
    <div>
      {show && <div>是否展示</div>}
      <button onClick={changeFun}>自定义按钮</button>
    </div>
  );
}

export default CustomeHook;

10、ReactHooks使用规则

1、只能在组件中或者其他自定义Hook函数中调用
2、只能在组件的顶层调用，不能嵌套在if、for等其他函数中