React18从入门到实战-day1导言本文主要内容来源黑马的React18入门到实战视频教程，主要是为了复习自己以及

导言

本文主要内容来源黑马的React18入门到实战视频教程，主要是为了复习自己已经遗忘的基础知识。

JSX基础

JSX概念和本质

概念

JSX是js和XML(HTML)的缩写，表示在js代码中写HTML结构，是React中编写UI模板的一种方式。

const message="this is message";
function APP(){
return (
   <div>
   <h1>this is title</h1>
   {message}
   </div>
  )
}

优势:

HTML的声明式模板写法
js的可编程能力

本质

不是标准的js语法，是js的语法扩展，浏览器本身不能识别，要通过解析工具做解析之后才能在浏览器中运行

识别js表达式

通过大括号{}识别js中的表达式

使用引号传递字符串

function APP(){
return (
   <div>
   <h1>this is title</h1>
   {'this is message'}
   </div>
  )
}

使用js变量

const message="this is message";
function APP(){
return (
   <div>
   <h1>this is title</h1>
   {message}
   </div>
  )
}

函数调用和方法调用

function getName(){
    return 'jack'
}
function APP(){
return (
   <div>
   <h1>this is title</h1>
   {getName()}
   </div>
  )
}

使用js对象

<div style={{cilor:'red}}>this is message</div>

JSX实现列表渲染

const list = [
  { id: 1001, name: 'Vue'},
  { id: 1002, name: 'React'},
  { id: 1003, name: 'Angular'}
]
 
function App() {
  return (
    <div className="App">
      this is App
      {/* 渲染列表 */}
      <ul>
        {/* { list.map(item => <li>Vue</li>) } */}
        { list.map(item => <li key={item.id}>{ item.name }</li>) }
      </ul>
    </div>
  )
}
 
export default App

注意：

在React中，渲染list的时候，重复的元素身上需要绑定一个独一无二的key值。

JSX中实现基础条件渲染

语法：在React中，可以通过逻辑与运算符&& 、三元表达式（？：） 实现基础的条件渲染。

const isLogin = true;
 
function App() {
  return (
    <div className="App">
      this is App
      {/* 逻辑与 && */}
      {isLogin && <span>this is span</span>}
      {/* 三元运算 */}
      {isLogin ? <span>玛卡巴卡</span> : <span>玛卡巴卡</span>}
    </div>
  );
}
 
export default App;

JSX实现复杂条件渲染

需求： 列表中需要根据文章状态适配三种情况，单图，三图和无图三种模式。

解决方案： 自定义函数 + if判定语句

//定义文章类型
const articleType = 0; // 0 1 3
 
//定义核心函数（根据文章类型返回不同的JSX模板）
 
function getArticleTem() {
if (articleType === 0) {
    return <div>我是无图文章</div>;
  } else if (articleType === 1) {
    return <div>我是单图模式</div>;
  } else {
    return <div>我是三图文章</div>;
  }

}
 
function App (){
  return (
    <div className="App">
      {/* 调用函数渲染不同的模板 */}
      {getArticleTem()}
    </div>
  )
}
 
export default App;

React中事件绑定

基础事件绑定

语法：on + 事件名称 = { 事件处理程序 } ，整体上遵循驼峰命名法。

function App() {
  const clickHandler = () => {
    console.log("button按钮点击了");
  };
  return <button onClick={clickHandler}>点点我</button>;
}
 
export default App;

传递事件参数

语法： 事件绑定的位置改成箭头函数的写法，在执行clickHandler实际处理业务函数的时候传递实参。

function App() {
  const clickHandler = (name) => {
    console.log("button按钮点击了",name);
  };
  return <button onClick={()=>clickHandler('123')}>点点我</button>;
}
 
export default App;

传递事件对象和自定义参数

语法： 在事件绑定的位置传递事件实参e和自定义参数，clickHandler中声明形参，注意顺序对应

function App() {
  const clickHandler = (name,e) => {
    console.log("button按钮点击了",name,e);
  };
  return <button onClick={(e)=>clickHandler('123',e)}>点点我</button>;
}
 
export default App;

React组件的基础使用

在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI，渲染组件只需要把组件当成标签书写即可。

//1、定义组件
function Button() {
  return <button>click me</button>;
}
function App() {
  /*  2、使用组件(渲染组件) */
  return (
    <div className="App">
      {/* 自闭合 */}
      <Button />
      {/* 成对标签 */}
      <Button></Button>
    </div>
  );
}
 
export default App;

useState基础使用

概念： useState是一个React Hook（函数），它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果。

本质： 和普通变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（数据驱动视图）。

1、useState是一个函数，返回值是一个数组。

2、数组中的第一个参数是状态变量，第二个参数是set函数用来修改状态的变量。

3、useState的参数将作为count的初始值。

案例：

点击按钮，数值增加。

import { useState } from "react";
 
function App() {
  /*  1、调用useState添加一个状态变量 */
  //count状态变量
  //setCount修改状态变量的方法
const [count,setCount]=useState(0);
  //点击事件
  const handleClick = () => {
    //作用1、用传入的新值修改count
    //2、重新使用新的count渲染UI
    setCount(count+1);
    
  };
  return (
    <div className="App">
      <button onClick={handleClick}>{count}</button>
    </div>
  );
}
 
export default App;

修改状态的规则

状态不可变

在React中，状态被认为是只读的，应该始终替换它而不是修改它，直接修改状态。

import { useState } from "react";
 
function App() {
  /*  1、调用useState添加一个状态变量 */
  //count状态变量
  //setCount修改状态变量的方法
const [count,setCount]=useState(0);
  //点击事件
  const handleClick = () => {
    //作用1、用传入的新值修改count
    //2、重新使用新的count渲染UI
    setCount(count+1);
    
  };
  return (
    <div className="App">
      <button onClick={handleClick}>{count}</button>
    </div>
  );
}
 
export default App;

修改对象状态

规则：对于对象类型的状态变量，应该始终传给set方法一个全新的对象来进行修改。

直接修改原对象，不引发视图变化

import { useState } from "react";
 
function App() {
  const [form, setForm] = useState({ name: "jack" });
  const changeForm = () => {
    //1、错误写法
    // form.name = 'mary';
 
    //2、正确写法
    setForm({
      ...form,
      name: "mary",
    });
  };
  return (
    <div>
      <button onClick={changeForm}>修改form-{form.name}</button>
    </div>
  );
}
 
export default App;

B站案例-评论

渲染评论列表

使用useState维护评论列表
使用map方法对列表数据进行遍历渲染（别忘了加key）

import { useState } from "react";
import "./App.scss";
import avatar from "./images/avatar.png";
 
//当前用户登录信息
const user = {
  id: "20240321", //用户id
  name: "jack", //用户名称
  avatar, //用户头像
};
 
//导航Tab数据
const tabs = [
  { type: "hot", text: "最热" },
  { type: "new", text: "最新" },
];
//评论列表
const list = [
  {
    rpid: 3, //评论id
    user: {
      uid: "123456",
      avatar: "http://toutiao.itheima.net/resources/images/98.jpg",
      uname: "周杰伦",
    }, //用户信息
    content:'什么东西',
    ctime: "03-21 08:24", //评论时间
    like: 100, //点赞数
  },
];
 
function App() {
  const [commentList, setCommentList] = useState(list);
  return (
    <div className="app">
      {/* 导航app */}
      <div className="reply-navigation">
        <ul className="nav-bar">
          <li className="nav-title">
            <span className="nav-title-text">评论</span>
            <span className="total-reply">{10}</span>
          </li>
          <li className="nav-sort"></li>
        </ul>
      </div>
      <div className="reply-wrap">
        {/* 发表评论 */}
        <div className="box-normal">
          {/* 用户头像 */}
          <div className="reply-box-avatar">
            <div className="bili-avatar">
              <img className="bili-avatar-img" alt="用户头像" src={avatar}/>
            </div>
          </div>
          {/* 评论框 */}
          <div className="reply-box-wrap">
            <textarea
              className="reply-box-textarea"
              placeholder="发一条友善的评论"
            />
          </div>
          {/* 发布按钮 */}
          <div className="reply-box-send">
            <div className="send-text">发布</div>
          </div>
        </div>
 
        {/* 评论列表 */}
        <div className="reply-list">
          {/* 评论项 */}
          {commentList.map((item) => (
            <div className="reply-item" key={item.rpid}>
              {/* 头像(左侧) */}
              <div className="root-reply-avatar">
                <div className="bili-avatar">
                  <img
                    className="bili-avatar-img"
                    alt="用户头像"
                    src={item.user.avatar}
                  />
                </div>
              </div>
 
              {/* 评论（右侧） */}
              <div className="content-wrap">
                {/* 用户名称 */}
                <div className="user-info">
                  <div className="user-name">{item.user.uname}</div>
                </div>
                {/* 用户评论 */}
                <div className="root-reply">
                  <span className="reply-content">{item.content}</span>
                  {/* 时间、点赞、删除 */}
                  <div className="reply-info">
                    <span className="reply-time">{item.ctime}</span>
                    <span className="reply-time">点赞数:{item.like}</span>
                    {/* 删除条件：user.id === item.user.id */}
                    <span className="delete-btn">删除</span>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
 
export default App;

删除评论显示

只有自己的评论才显示删除按钮
点击删除按钮，删除当前评论，列表中不再显示

 
import { useState } from "react";
import "./App.scss";
import avatar from "./images/avatar.png";
 
//当前用户登录信息
const user = {
  id: "20240321", //用户id
  name: "jack", //用户名称
  avatar, //用户头像
};
 
//导航Tab数据
const tabs = [
  { type: "hot", text: "最热" },
  { type: "new", text: "最新" },
];
//评论列表
const list = [
  {
    // 评论id
    rpid: 1,
    // 用户信息
    user: {
      uid: '13258165',
      avatar: 'http://toutiao.itheima.net/resources/images/98.jpg',
      uname: '周杰伦'
    },
    // 评论内容
    content: '哎呦, 不错哦',
    // 评论事件
    ctime: '10-18 08:15',
    like: 88,
  },
  {
    // 评论id
    rpid: 2,
    // 用户信息
    user: {
      uid: '12258164',
      avatar: 'http://toutiao.itheima.net/resources/images/98.jpg',
      uname: '海绵宝宝'
    },
    // 评论内容
    content: '行了吧！',
    // 评论事件
    ctime: '10-18 10:15',
    like: 88,
  },
  {
    // 评论id
    rpid: 3,
    // 用户信息
    user: {
      uid: '20240321',
      avatar: 'http://toutiao.itheima.net/resources/images/98.jpg',
      uname: '玛卡巴卡 '
    },
    // 评论内容
    content: '去屎!',
    // 评论事件
    ctime: '10-19 09:15',
    like: 66,
  }, 
]
 
function App() {
  //1、渲染评论列表
  const [commentList, setCommentList] = useState(list);
  //2、删除评论
  const handleDel = (id) =>{
    //对commentList做过滤处理
    setCommentList(commentList.filter(item=> item.rpid !== id))
  }
  return (
    <div className="app">
      {/* 导航app */}
      <div className="reply-navigation">
        <ul className="nav-bar">
          <li className="nav-title">
            <span className="nav-title-text">评论</span>
            <span className="total-reply">{10}</span>
          </li>
          <li className="nav-sort"></li>
        </ul>
      </div>
      <div className="reply-wrap">
        {/* 发表评论 */}
        <div className="box-normal">
          {/* 用户头像 */}
          <div className="reply-box-avatar">
            <div className="bili-avatar">
              <img className="bili-avatar-img" alt="用户头像" src={avatar}/>
            </div>
          </div>
          {/* 评论框 */}
          <div className="reply-box-wrap">
            <textarea
              className="reply-box-textarea"
              placeholder="发一条友善的评论"
            />
          </div>
          {/* 发布按钮 */}
          <div className="reply-box-send">
            <div className="send-text">发布</div>
          </div>
        </div>
 
        {/* 评论列表 */}
        <div className="reply-list">
          {/* 评论项 */}
          {commentList.map((item) => (
            <div className="reply-item" key={item.rpid}>
              {/* 头像(左侧) */}
              <div className="root-reply-avatar">
                <div className="bili-avatar">
                  <img
                    className="bili-avatar-img"
                    alt="用户头像"
                    src={item.user.avatar}
                  />
                </div>
              </div>
 
              {/* 评论（右侧） */}
              <div className="content-wrap">
                {/* 用户名称 */}
                <div className="user-info">
                  <div className="user-name">{item.user.uname}</div>
                </div>
                {/* 用户评论 */}
                <div className="root-reply">
                  <span className="reply-content">{item.content}</span>
                  {/* 时间、点赞、删除 */}
                  <div className="reply-info">
                    <span className="reply-time">{item.ctime}</span>
                    <span className="reply-time">点赞数:{item.like}</span>
                    {/* 删除条件：user.id === item.user.id */}
                   {user.id === item.user.uid && <span className="delete-btn" onClick={()=> handleDel(item.rpid)}>删除</span>}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
 
export default App;

渲染导航Tab和高亮显示

点击谁就把谁的type（独一无二的标识）记录下来，然后和遍历时的每一项的type做匹配，谁匹配到就设置负责高亮的类名。

顺序排列

点击最新，评论列表按照创建时间排序（新的在前），点击最热按照点赞数排序（多的在前）

把评论列表状态数据进行不同的排序处理，当成新值传给set函数重新渲染视图UI。

import { useState } from "react";
import "./App.scss";
import avatar from "./images/avatar.png";
import classNames from 'classnames'
import _ from 'lodash'
 
//当前用户登录信息
const user = {
  id: "20240321", //用户id
  name: "jack", //用户名称
  avatar, //用户头像
};
 
//导航Tab数据
const tabs = [
  { type: "hot", text: "最热" },
  { type: "new", text: "最新" },
];
//评论列表
const list = [
  {
    // 评论id
    rpid: 1,
    // 用户信息
    user: {
      uid: "13258165",
      avatar: "http://toutiao.itheima.net/resources/images/98.jpg",
      uname: "周杰伦",
    },
    // 评论内容
    content: "哎呦, 不错哦",
    // 评论事件
    ctime: "10-18 08:15",
    like: 88,
  },
  {
    // 评论id
    rpid: 2,
    // 用户信息
    user: {
      uid: "12258164",
      avatar: "http://toutiao.itheima.net/resources/images/98.jpg",
      uname: "海绵宝宝",
    },
    // 评论内容
    content: "行了吧！",
    // 评论事件
    ctime: "10-18 10:15",
    like: 30,
  },
  {
    // 评论id
    rpid: 3,
    // 用户信息
    user: {
      uid: "20240321",
      avatar: "http://toutiao.itheima.net/resources/images/98.jpg",
      uname: "玛卡巴卡 ",
    },
    // 评论内容
    content: "去屎!",
    // 评论事件
    ctime: "10-19 09:15",
    like: 66,
  },
];
 
function App() {
  //1、渲染评论列表
  const [commentList, setCommentList] = useState(_.orderBy(list,'like','desc'));
  //2、删除评论
  const handleDel = (id) => {
    //对commentList做过滤处理
    setCommentList(commentList.filter((item) => item.rpid !== id));
  };
  //tab切换功能
  const [type, setType] = useState("hot");
  const handleTabChange = (type) => {
    setType(type);
    if (type === "hot") {
      //根据点赞数量排序
      setCommentList(_.orderBy(commentList, "like", "desc"));
    }
    //根据创建时间排序
    else setCommentList(_.orderBy(commentList, "ctime", "desc"));
  };
  return (
    <div className="app">
      {/* 导航app */}
      <div className="reply-navigation">
        <ul className="nav-bar">
          <li className="nav-title">
            <span className="nav-title-text">评论</span>
            <span className="total-reply">{10}</span>
          </li>
          <li className="nav-sort">
            {/* 高亮类名：active */}
            {tabs.map((item) => (
              <span
                key={item.type}
                onClick={() => handleTabChange(item.type)}
                className={classNames("nav-item", {
                  active: type === item.type,
                })}
                // className={`nav-item ${type === item.type && 'active'}`}
              >
                {item.text}
              </span>
            ))}
          </li>
        </ul>
      </div>
      <div className="reply-wrap">
        {/* 发表评论 */}
        <div className="box-normal">
          {/* 用户头像 */}
          <div className="reply-box-avatar">
            <div className="bili-avatar">
              <img className="bili-avatar-img" alt="用户头像" src={avatar} />
            </div>
          </div>
          {/* 评论框 */}
          <div className="reply-box-wrap">
            <textarea
              className="reply-box-textarea"
              placeholder="发一条友善的评论"
            />
          </div>
          {/* 发布按钮 */}
          <div className="reply-box-send">
            <div className="send-text">发布</div>
          </div>
        </div>
 
        {/* 评论列表 */}
        <div className="reply-list">
          {/* 评论项 */}
          {commentList.map((item) => (
            <div className="reply-item" key={item.rpid}>
              {/* 头像(左侧) */}
              <div className="root-reply-avatar">
                <div className="bili-avatar">
                  <img
                    className="bili-avatar-img"
                    alt="用户头像"
                    src={item.user.avatar}
                  />
                </div>
              </div>
 
              {/* 评论（右侧） */}
              <div className="content-wrap">
                {/* 用户名称 */}
                <div className="user-info">
                  <div className="user-name">{item.user.uname}</div>
                </div>
                {/* 用户评论 */}
                <div className="root-reply">
                  <span className="reply-content">{item.content}</span>
                  {/* 时间、点赞、删除 */}
                  <div className="reply-info">
                    <span className="reply-time">{item.ctime}</span>
                    <span className="reply-time">点赞数:{item.like}</span>
                    {/* 删除条件：user.id === item.user.id */}
                    {user.id === item.user.uid && (
                      <span
                        className="delete-btn"
                        onClick={() => handleDel(item.rpid)}
                      >
                        删除
                      </span>
                    )}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
 
export default App;

classnames类名优化

github.com/JedWatson/c…

企业微信截图_17367370002160.png

受控表单的绑定

企业微信截图_17367377543315.png

1、准备一个React状态值

const [value,setValue]=useState('');

2、通过value属性绑定状态，通过onChange属性绑定状态同步的函数。

<input type="text" value={value} onChange={(e)=> setValue(e.target.value)}/>

import {useState} from "react";
 
 
function App() {
  const [value,setValue] = useState('');
  return (
    <div className="App">
      <input value={value} onChange={(e)=> setValue(e.target.value)}/>
    </div>
  
  );
}
 
export default App;

从React中获取DOM

在React组件中获取/操作DOM，需要使用useRef React Hook钩子函数，分为两步：

1、使用useRef创建ref对象，并与JSX绑定

const inputRef = useRef(null)
 
<input  type="text" ref={inputRef} />

2、在DOM可用时，通过inputRef.current拿到DOM对象

console.log(input.current)

import { useRef } from "react";
 
function App() {
  //1、使用useRef生成ref对象，绑定到dom标签上
  //2、DOM可用时,ref.current获取dom
  // 组件渲染完毕后（DOM生成后），才可用
  const inputRef = useRef(null);
  const showDom = () => {
    console.log(inputRef.current);
  };
 
  return (
    <div className="App">
      <input ref={inputRef} type="text" />
      <button onClick={showDom}>获取DOM</button>
    </div>
  );
}
 
export default App;

B站案例-核心功能实现

获取评论内容

const [content, setContent] = useState('')
 
...
 
{/* 评论框 */}
<textarea
  className="reply-box-textarea"
  placeholder="发一条友善的评论"
  ref={inputRef}
  value={content}
  onChange={(e) => setContent(e.target.value)}
/>

点击发布按钮——发布评论

const handlPublish = () => {
  setCommentList([
    ...commentList,
    {
      rpid: uuidV4(), // 随机id
      user: {
        uid: '30009257',
        avatar,
        uname: '嘻嘻嘻',
      },
      content: content,
      ctime: dayjs(new Date()).format('MM-DD hh:mm'), // 格式化 月-日 时:分
      like: 66,
    }
  ])
  // 1. 清空输入框的内容
  setContent('')
  // 2. 重新聚焦  dom(useRef) - focus
  inputRef.current.focus()
}
 
...
 
<div className="reply-box-send">
  <div className="send-text" onClick={handlPublish}>发布</div>
</div>

id处理和时间处理

1、rpid要求一个唯一的随机数 id-uuid

2、ctime要求以当前时间为标准，生成固定的格式（dayjs）

import { v4 as uuidV4 } from 'uuid'
import dayjs from 'dayjs'
 
...
 
{
  rpid: uuidV4(), // 随机id
  user: {
    uid: '30009257',
    avatar,
    uname: '嘻嘻嘻',
  },
  content: content,
  ctime: dayjs(new Date()).format('MM-DD hh:mm'), // 格式化 月-日 时:分
  like: 66,
}

清空内容并重新聚焦

1、清空内容 - 把控制input框的value状态设置为空串

2、重新聚焦 - 拿到input的dom元素，调用focus方法

const handlPublish = () => {
  setCommentList([
    ...commentList,
    {
      rpid: uuidV4(), // 随机id
      user: {
        uid: '30009257',
        avatar,
        uname: '嘻嘻嘻',
      },
      content: content,
      ctime: dayjs(new Date()).format('MM-DD hh:mm'), // 格式化 月-日 时:分
      like: 66,
    }
  ])
  // 1. 清空输入框的内容
  setContent('')
  // 2. 重新聚焦  dom(useRef) - focus
  inputRef.current.focus()
}
 
...
 
{/* 评论框 */}
<textarea
  className="reply-box-textarea"
  placeholder="发一条友善的评论"
  ref={inputRef} // 给评论框绑定个ref标签, 方便获取
  value={content}
  onChange={(e) => setContent(e.target.value)}
/>

组件通信

父子通信

父传子-基本实现

实现步骤：

1、父组件传递数据：在子组件标签上绑定属性

2、子组件接收数据：子组件通过props参数接收数据

function Son (props) {
  console.log(props)
  return <div>this is Son , {props.name}</div>
}
 
function App() {
  const name = 'this is app name'
  return (
    <div className="App">
       <Son name={name}/>
    </div>
  );
}
 
export default App;

props可传递任意的数据

props是只读对象 子组件只能读取props中的数据，不能直接进行修改，父组件的数据只能由父组件修改。

父传子-特殊的props children

function Son (props) {
  console.log(props)
  return <div>this is Son , {props.name}</div>
}
 
function App() {
  const name = 'this is app name'
  return (
    <div className="App">
       <Son name={name}/>
    </div>
  );
}
 
export default App;

子传父

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

import { useState } from "react";
 
function Son({onGetMsg}) {
  //子组件中的数据
  const sonMsg = "this is son msg";
  return (
    <div>
      <button onClick={()=> onGetMsg(sonMsg)}>sendMsg</button>
    </div>
  );
}
 
function App() {
  const [msg, setMsg] = useState("");
  const getMsg = (msg) => {
    console.log(msg);
    setMsg(msg);
  };
  return (
    <div className="App">
      Father:{msg}
      <Son onGetMsg={getMsg}/>
    </div>
  );
}
 
export default App;

兄弟通信

借助“状态提升”机制，通过父组件进行兄弟组件之间的数据传递。

1、A组件先通过子传父的方式把数据传给父组件App。

2、App拿到数据后通过父传子的方式再传给B组件。

import { useState } from "react";
 
//1、通过子传父 A=>B
function A ({onGetName}) {
  const name = 'this is A name'
  return(
    <div>
      this is A component:
      <button onClick={()=>onGetName(name)}>send A to B</button>
    </div>
  )
}
 
//2、 通过父传子  App=>B
function B (props) {
  return(
    <div>
      this is B  component:{props.name}
    </div>
  )
}
 
function App() {
  const [name, setName] = useState('');
  const getName = (name) =>{
    setName(name);
  }
  return (
    <div className="App">
     <h1>Father:</h1>
     <A onGetName={getName}></A>
     <B name={name}></B>
    </div>
  );
}
 
export default App;

跨层通信

使用context跨层级传

import { useState,useContext,createContext } from "react";
 
const MsgContext = createContext();
 
 
function A () {
  return(
    <div>
      this is A component
      <B/>
    </div>
  )
}
 
function B (props) {
  const msg = useContext(MsgContext);
  return(
    <div>
      this is B  component - {msg}
    </div>
  )
}
 
function App() {
  const msg = 'this is App msg';
  return (
    <div>
      <MsgContext.Provider value={msg}>
        this is App
        <A />
      </MsgContext.Provider>
    </div>
  );
}
 
export default App;

useEffect

useEffect是一个React Hook函数，用于在React组件中创建不是由事件引起而是由渲染本身引起的操作（副作用）,比如发送AJAX请求，更改DOM等等。

企业微信截图_17367498947501.png

import { useState, useEffect } from "react";
 
 
function App() {
 //3、添加特定依赖项：组件初始渲染 + 特性依赖项变化时执行
 //依赖于count，只要count变化，就执行副作用函数
  const [count,setCount] = useState(0);
  useEffect(() => {
   console.log("副作用函数执行了");
  },[count]);
  const handleAdd = () =>{
    setCount(count + 1 );
  }
  return (
    <div className="App">
       this is App
       <button onClick={()=> handleAdd()}>{count}</button>
    </div>
  );
}
 
export default App;

清除用写return

自定义Hooks

概念

自定义Hook是以use打头的函数，通过自定义Hook函数可以用来实现逻辑的封装和复用。

需求

案例：

需求：切换显示/隐藏组件

//封装自定义Hook
 
//问题：布尔切换的逻辑 当前组件耦合在一起的时候，不方便复用
//解决思路：自定义Hook
import { useState } from "react";
 
function useToggle () {
  //可复用逻辑代码
  const [value,setValue] = useState(true);
  const handleToggle = () => {
    setValue(false)
  }
 
  //哪些状态和回调函数需要在其他组件中使用 return
  return {
    value,
    handleToggle
  }
 
}
 
// 封装自定义hook通用思路
// 1. 声明一个以use打头的函数
// 2. 在函数体内封装可复用的逻辑 (只要是可复用的逻辑)
// 3. 把组件中用到的状态或者回调return出去(以对象或者数组)
// 4. 在哪个组件中要用到这个逻辑, 就调用这个自定义hook, 结构出来状态和回调进行使用
 
 
function App() {
  const {value,handleToggle} = useToggle();
  return (
    <div className="App">
       {value && <div>this is div </div>}
       <button onClick={()=> handleToggle()}>卸载div组件</button>
    </div>
  );
}
 
export default App;

优化B站评论案例

github.com/typicode/js…

自定义函数封装接口请求

思路：① 编写一个use开头的函数

② 函数内部编写封装的逻辑

③ return 出去组件中用到的状态和方法

④ 组件中调用函数解构赋值使用

function useGetList () {
  // 获取接口数据渲染
  const [commentList, setCommentList] = useState([])
 
  useEffect(() => {
    // 请求数据
    async function getList () {
      // axios请求数据
      const res = await axios.get(' http://localhost:3004/list')
      setCommentList(res.data)
    }
    getList()
  }, [])
 
  return {
    commentList,
    setCommentList
  }
}
 
...
 
const [commetList, setCommetList] = useGetList()