黑马React18学习笔记（上）

最新推荐文章于 2024-06-13 19:33:37 发布

你算哪只臭居居

最新推荐文章于 2024-06-13 19:33:37 发布

阅读量1k

点赞数 22

文章标签： react 前端

本文链接：https://blog.csdn.net/qq_48105178/article/details/136810537

版权

一、React简介

1、是什么

React是由Meta公司研发，是一个用于构建Web和原生交互界面的库。

起源于Facebook的内部项目。

2、优势

通过虚拟DOM，最大限度的减少与DOM的交互，速度快。

使用JSX，代码的可读性很好。

可以与已有的库或者框架很好的配合。

使用React构建组件使代码更加容易得到复用，可以很好的应用在大型项目的开发过程中。

单向数据流减少了重复的代码，轻松实现数据绑定。

二、React开发环境创建

使用creat-react-app快速搭建开发环境

creat-react-app是一个快速创建React开发环境的工具，底层由Webpack创建，封装了配置细节，开箱即用。

执行命令：

npx create-react-app react-basic

1、npx ：Node.js工具命令，查找并执行后续的包命令。

2、create-react-app ：核心包（固定写法），用于创建React项目。

3、react-basic ：React项目的名称（可以自定义）

cd +文件名，切换到文件夹下，使用 npm start 启动项目。

创建React项目的更多方式：启动一个新的 React 项目 – React 中文文档

src文件夹下只保留：App.js index.js两个文件。

简化保留下来的文件：

//App.js   （项目的根组件）

function App() {
  return (
    <div className="App">
      this is App
    </div>
  );
}

export default App;

//index.js   （项目的人口，从这里开始运行）


//react必要的两个包
import React from "react";
import ReactDOM from "react-dom/client";

//导入项目的根组件
import App from "./App";

//把App根组件渲染到id为root的dom节点上
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

工作方式：

App.js —— index.js —— React ——index.html

三、JSX

1、什么是JSX

概念：JSX是JavaScript和XML（HTML）的缩写，表示在JS代码中编写HTML模板结构，它是React中编写UI模板的方式。

优势：

1、HTML的声明式模板写法

2、JS的可编程能力

2、JSX的本质

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

3、JSX高频场景

3.1 JSX中使用JS表达式

在JSX中可以通过 大括号语法{} 识别JavaScript中的表达式，比如常见的变量、函数调用、方法调用等等。

①、使用引号传递字符串

②、使用JavaScript变量

③、函数调用和方法调用

④、使用JavaScript对象

注意：if语句、switch语句、变量声明属于语句，不是表达式，不能出现在{}中。

案例：

App.js

const count = 100;
function getName() {
  return "玛卡巴卡";
}
function App() {
  return (
    <div className="App">
      this is App
      {/* 使用引号传递字符串 */}
      {"this is a message"}
      {/* 识别js变量 */}
      {count}
      {/* 函数调用 */}
      {getName()}
      {/* 方法调用 */}
      {new Date().getDate()}
      {/* 使用JS对象 */}
      <div style={{ color: "pink" }}>this is a div</div>
    </div>
  );
}

export default App;

浏览器效果：

3.2 JSX中实现列表渲染

语法：在JSX中可以使用原生JS中的map方法遍历渲染列表。

案例：

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值。

3.3 JSX中实现条件渲染（基础）

根据不同的条件，渲染不同的模板。

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

案例：

const isLogin = true;

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

export default App;

效果：

3.4 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中的事件绑定

1、基础事件绑定

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

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

export default App;

2、传递自定义参数

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

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

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

四、React中的组件

1、是什么

概念：一个组件就是用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以互相嵌套，也可以复用多次。

组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用。

2、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

1、基础使用

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

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

const [count,setCount] = useState(0)

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()}>Add-{count}</button>
    </div>
  );
}

export default App;

效果：

2、修改状态的规则

状态不可变

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

案例：

import { useState } from "react"

function App() {
  // 1. 调用 useState 添加一个状态变量
  // count 状态变量
  // setCount 修改状态变量的方法
  const [count, setCount] = useState(0)

  // 2. 点击事件
  const handleClick = () => {
    setCount(count + 1)
  }
  return (
    <div className="App">
      <button onClick={ () => handleClick()}>Add-{count}</button>
    </div>
  )
}

export default App

3、修改对象状态

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

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

调用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;

六、基础样式控制

React组件基础的样式控制有两种方案：

1、行内样式（不推荐）

2、class类名控制

案例：

//App.jS


import "./index.css";

const style = {
  color: "blue",
  fontSize: "28px",
};

function App() {
  return (
    <div>
      {/* 行内样式控制 */}
      <span style={{ color: "red", fontSize: "18px" }}>我是一个span</span>
      {/* 内部样式控制 */}
      <span style={style}>我是一个span</span>
      {/* 外部样式控制 */}
      <span className="gray">我是一个span</span>
    </div>
  );
}

export default App;

//index.css

.gray {
  background-color: gray;
}

效果：

3、B站评论案例

效果展示：

3.1、渲染评论列表

使用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;

3.2、删除评论实现

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


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;

3.3、渲染导航Tab和高亮显示

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

3.4、评论列表排序功能实现

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

把评论列表状态数据进行不同的排序处理，当成新值传给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;

3.5 classnames优化类名控制

GitHub - JedWatson/classnames: A simple javascript utility for conditionally joining classNames together

classnames是一个简单的JS库，可以非常方便的通过条件控制class类名的显示。

上面代码的问题：字符串的拼接方式不够直观，也容易出错。

七、受控表单绑定

概念：使用React组件的状态（useState）控制表单的状态。

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站评论案例——核心功能实现

1、获取评论内容

const [content, setContent] = useState('')

...

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

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

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>

B站评论案例 — 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,
}

B站评论案例 ——清空内容并重新聚焦

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、父传子——基础实现

实现步骤：

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;

效果：

3、父传子——props说明

3.1 props可传递任意的数据

数字、字符串、布尔值、数组、对象、函数、JSX。

3.2 props是只读对象

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

4、父传子——特殊的prop children

场景：当我们把内容嵌套在子组件标签中时，父组件会自动在名为children的prop属性中接收该内容。

案例：

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;

效果：

5、父子组件通信——子传父

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

案例：

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;

效果：

6、使用状态提升实现兄弟组件通信

实现流程：

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

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;

效果：

7、使用Context机制跨层级组件通信

实现步骤：

1、使用createContext方法创建一个上下文对象Ctx

2、在顶层组件（App）中通过Ctx.provider组件提供数据

3、在底层组件（B）中通过useContext钩子函数获取消费数据。

案例：

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

1、useEffect概念

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

说明：上面的组件中没有发生任何的用户事件，组件渲染完毕之后就需要和服务器要数据，整个过程属于 “只由渲染引起的操作”。

2、useEffect的基础使用

需求：在组件渲染完毕之后，立刻从服务端获取频道列表数据并显示到页面中。

useEffect(()=> {}, [])

1、参数1是一个函数，可以把它叫做副作用函数，在函数内部可以放置要执行的操作。

2、参数2是一个数组（可选参），在数组里放置依赖项，不同依赖项会影响第一个参数函数的执行，当是一个空数组的时候，副作用函数只会在组件渲染完毕之后执行一次。

案例：

import { useState, useEffect } from "react";
const URL = "http://geek.itheima.net/v1_0/channels";

function App() {
  //创建一个状态数据
  const [list, setList] = useState([]);
  useEffect(() => {
    //额外的操作，获取频道参数
    async function getList() {
      const res = await fetch(URL)
      const jsonRes = await res.json()
      // console.log(list);
      setList(jsonRes.data.channels);
    }
    getList();
  }, []);
  return (
    <div className="App">
      <ul>
        {list.map((item) => {
          return <li key={item.id}>{item.name}</li>;
        })}
      </ul>
    </div>
  );
}

export default App;

效果：

3、useEffect依赖项参数说明

useEffect副作用函数的执行时机存在多种情况，根据传入依赖项的不同，会有不同的执行表现。

依赖项	副作用函数执行时机
没有依赖项	数组初始渲染+组件更新时执行
空数组依赖	只在初始渲染时执行一次
添加特定依赖项	组件初始渲染 + 特性依赖项变化时执行

3.1 没有依赖项

功能：点击按钮，数字会逐渐+1。

代码：

import { useState, useEffect } from "react";


function App() {
 //1、没有依赖项 初始+组件+更新
  const [count,setCount] = useState(0);
  useEffect(() => {
   console.log("副作用函数执行了");
  });
  const handleAdd = () =>{
    setCount(count + 1 );
  }
  return (
    <div className="App">
       this is App
       <button onClick={()=> handleAdd()}>{count}</button>
    </div>
  );
}

export default App;

效果：

3.2 空数组依赖

案例：

import { useState, useEffect } from "react";


function App() {
 //2、空数组依赖项 初始渲染时执行一次
  const [count,setCount] = useState(0);
  useEffect(() => {
   console.log("副作用函数执行了");
  },[]);
  const handleAdd = () =>{
    setCount(count + 1 );
  }
  return (
    <div className="App">
       this is App
       <button onClick={()=> handleAdd()}>{count}</button>
    </div>
  );
}

export default App;

效果：

3.3 添加特定依赖项

案例：

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;

效果：

4、useEffect——清除副作用

在useEffect中编写的由渲染本身引起的对接组件外部的操作，社区也经常把它叫做副作用操作，比如在useEffect中开启了一个定时器，我们想在组件卸载时把这个定时器再清理掉，这个过程就是清理副作用。

useEffect(() => {
	// 实现副作用操作逻辑
	return () => {
		// 清除副作用逻辑
		...
	}
}, [])

说明：清除副作用的函数最常见的执行时机是在组件卸载时自动执行。

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

功能：点击卸载按钮，定时器会停止。

案例：

import { useState, useEffect } from "react";

function Son() {
  useEffect(()=>{
    const timer = setInterval(()=>{
      console.log('定时器执行中~~~');
    },1000)

    return()=>{
      clearInterval(timer);
    }
  },[])
  return <div>this is Son</div>
}

function App() {
  const [show,setShow]= useState(true);
  return (
    <div className="App">
       {show && <Son/>}
       <button onClick={()=> setShow(false)}>卸载Son组件</button>
    </div>
  );
}

export default App;

效果：

十一、自定义Hook实现

1、概念

自定义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;

2、React Hooks使用规则

①、只能在组件中或者其他自定义Hook函数中调用

②、只能在组件的顶层调用，不能嵌套在if、for、其他函数中。

理解：就是Hooks不能有条件的执行，只能直接在顶部采用 const {value,handleToggle} = useToggle( ) 这种方式，直接调用。

案例：


import { useState } from "react";

function App() {
  if(Math.random()> 0.5) {
    useState()
  }
  return (
    <div className="App">
       this is App
    </div>
  );
}

export default App;

效果：

3、优化B站评论案例

3.1 通过接口获取评论列表

使用json-server 工具模拟接口服务，通过axios 发送接口请求。

注：json-server是一个快速以.json文件作为数据源模拟接口服务的工具。

axios是一个广泛使用的前端请求库。

①、安装

# -D 指安装到开发时依赖
npm i json-server -D

②、配置package.json

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "serve": "json-server db.json --port 3004" // 添加 json-server 的端口
},

可参考： https://github.com/typicode/json-server

③、使用useEffect调用接口获取数据

useEffect(() => {
	// 发送网络请求
	...
}, [])

3.2 自定义Hook函数封装数据请求

思路：① 编写一个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()

3.3 封装评论项Item组件

// 封装Item组件
function Item ({ item, onDel }) {
  return (
    <div className="reply-item">
      {/* 头像 */}
      <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.uid === item.user.uid &&
              <span className="delete-btn" onClick={() => onDel(item.rpid)}>
                删除
              </span>}
          </div>
        </div>
      </div>
    </div>
  )
}

{/* 评论列表 */}
<div className="reply-list">
  {/* 评论项 */}
  {commetList.map(item => <Item key={item.rpid} item={item} onDel={() => handleDel(item.rpid)}/>)}
</div>