React基础语法

1.React介绍

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

1.1 React优势

相较于传统基于DOM开发的优势

1.组件化的开发方式

2.不错的性能

相较于其他前端框架的优势

1.丰富的生态

2.跨平台支持

1.2React的时长情况

全球最流行，大厂必备

2.开发环境创建

create-react-app是一个快速创建React开发环境的工具，底层由Webpack构件，封装了配置细节，开箱即用执行命令：

npx create-react-app react-basic

cd react-basic
npm start

创建项目更多方式：

https://zh-hans.react.dev/learn/start-a-new-react-project

3.JSX基础

3.1什么是JSX

JSX是JavaScript和XML(HTML)的缩写，表示在JS代码中编写HTML模板结构，是React构建UI的方式

const message = 'this is message'

function App() {
  return (
    <div className="App">
      <h1>My First React App</h1>
      {message}
    </div>
  );
}

export default App;

3.2 JSX的本质

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

3.3JSX高频场景-JS表达式

在JSX中可以通过 <font style="color:rgb(119, 119, 119);background-color:rgb(248, 248, 248);">大括号语法{}</font> 识别JavaScript中的表达式，比如常见的变量、函数调用、方法调用等等

使用引号传递字符串、JS变量、函数调用和方法调用、对象

注意：不能使用条件语句

const message = 'this is message'

function getAge(){
  return 18
}

function App() {
    return (
        <div className="App">
            <h1>My First React App</h1>
            {message}
          {/*函数调用*/}
            {getAge()}
        </div>
    );
}

export default App;

3.4JS高频场景-列表场景

const list = [
    {id:1001, name:'Vue'},
    {id:1002, name: 'React'},
    {id:1003, name: 'Angular'}
]

function App(){
    return (
        <ul>
            {list.map(item => <li key={item.id}>{item.name}</li>)}
        </ul>
    );
}

export default App;

3.5JS高频场景-条件渲染

在React中，可以通过逻辑与运算&&、三元表达式(?:)实现基础的条件渲染

const flag = true;
const loading = true;

function App() {
    return (
        <>
            {flag && <span>this is span</span>}
            {loading ? <span>loading...</span>:<span>this is span</span>}
        </>
    )
}

export default App;

3.6JSX高频场景-复杂条件渲染

需求：列表中需要根据文章的状态适配

const type = 0; // 0 1 3


function getArticleJSX() {
    if (type === 0) {
        return <div>无图模式</div>
    } else if (type === 1) {
        return <div>单图模式</div>
    } else if(type === 3)
    {
        return <div>多图模式</div>
    }
}


function App() {
    return (
        <>
            {getArticleJSX()}
        </>
    )
}

export default App;

4.React的事件绑定

4.1基础实现

React中的事件绑定，通过语法on + 事件名称 = {事件处理程序}。整体上遵循驼峰命名

function App() {
  const clickHandle = () =>{
    console.log('button按钮点击了');
  }
    return (
       <button onClick={clickHandle}>click me</button>
    )
}

export default App;

4.2使用事件参数

在事件回调函数中设置形参e即可

function App() {
  const clickHandle = (e) =>{
    console.log('button按钮点击了', e);
  }
    return (
       <button onClick={clickHandle}>click me</button>
    )
}

export default App;

4.3传递自定义参数

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

function App() {
    const clickHandle = (name) =>{
        console.log('button按钮点击了', name);
    }
    return (
        <button onClick={()=>clickHandle('jack')}>click me</button>
    )
}

export default App;

注意：不能直接写函数调用，这里事件绑定需要一个函数引用

4.4同时传递事件对象的自定义参数

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

function App() {
    const clickHandle = (name, e) =>{
        console.log('button按钮点击了', name, e);
    }
    return (
        <button onClick={(e)=>clickHandle('jack', e)}>click me</button>
    )
}

export default App;

5.React组件基础使用

5.1 组件是什么

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

5.2组件基础使用

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

function Button() {
  return <button>click me</button>
}
function App() {
    
    return (
       <div>
       <Button/>
       <Button></Button>
       </div>
    )
}

export default App;

6.组件状态管理-useStatue

6.1基础使用

useState是一个React Hook（函数），它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果和普通的JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着发生变化（数据驱动试图）

import React from "react";

function App() {
    const [count, setCount] = React.useState(0)
    return (
        <div>
            <button onClick={()=>setCount(count + 1)}>{count}</button>
        </div>
    )
}

export default App;

6.2状态的修改规则

在React中状态被认为是只读的，我们应该始终替换它而不是修改它，直接修改状态不能引发视图更新

6.3修改对象状态

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

import React from "react";

function App() {
    const [form, setForm] = React.useState({
        name : 'jack'
    })
    const handleChageName=() => {
        setForm({
            ...form,
            name : 'john'
        })
    }
    return (
        <div>
            <button onClick={()=>handleChageName()}>{form.name}</button>
        </div>
    )
}

export default App;

7.组建的基础样式处理

React组件基础的样式控制有两种方式，行内样式和class类名控制

import React from "react";


function App() {

    return (
        <div>
           <div style={{color:'red'}}> this is div</div>
        </div>
    )
}

export default App;

index.css

.foo{
  color: red;
}

App.js

import './index.css';


function App() {

    return (
        <div>
           <div className="foo"> this is div</div>
        </div>
    )
}

export default App;

8.B站评论案例

渲染评论列表
删除评论实现
渲染导航Tab和高亮实现
评论列表排序功能实现

8.1基础项目

App.js

import './App.scss'
import avatar from './images/bozai.png'

/**
 * 评论列表的渲染和操作
 *
 * 1. 根据状态渲染评论列表
 * 2. 删除评论
 */

// 评论列表数据
const defaultList = [
  {
    // 评论id
    rpid: 3,
    // 用户信息
    user: {
      uid: '13258165',
      avatar: '',
      uname: '周杰伦',
    },
    // 评论内容
    content: '哎哟，不错哦',
    // 评论时间
    ctime: '10-18 08:15',
    like: 88,
  },
  {
    rpid: 2,
    user: {
      uid: '36080105',
      avatar: '',
      uname: '许嵩',
    },
    content: '我寻你千百度 日出到迟暮',
    ctime: '11-13 11:29',
    like: 88,
  },
  {
    rpid: 1,
    user: {
      uid: '30009257',
      avatar,
      uname: '黑马前端',
    },
    content: '学前端就来黑马',
    ctime: '10-19 09:00',
    like: 66,
  },
]
// 当前登录用户信息
const user = {
  // 用户id
  uid: '30009257',
  // 用户头像
  avatar,
  // 用户昵称
  uname: '黑马前端',
}

/**
 * 导航 Tab 的渲染和操作
 *
 * 1. 渲染导航 Tab 和高亮
 * 2. 评论列表排序
 *  最热 => 喜欢数量降序
 *  最新 => 创建时间降序
 */

// 导航 Tab 数组
const tabs = [
  { type: 'hot', text: '最热' },
  { type: 'time', text: '最新' },
]

const App = () => {
  return (
    <div className="app">
      {/* 导航 Tab */}
      <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 */}
            <span className='nav-item'>最新</span>
            <span className='nav-item'>最热</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" src={avatar} alt="用户头像" />
            </div>
          </div>
          <div className="reply-box-wrap">
            {/* 评论框 */}
            <textarea
              className="reply-box-textarea"
              placeholder="发一条友善的评论"
            />
            {/* 发布按钮 */}
            <div className="reply-box-send">
              <div className="send-text">发布</div>
            </div>
          </div>
        </div>
        {/* 评论列表 */}
        <div className="reply-list">
          {/* 评论项 */}
          <div className="reply-item">
            {/* 头像 */}
            <div className="root-reply-avatar">
              <div className="bili-avatar">
                <img
                  className="bili-avatar-img"
                  alt=""
                />
              </div>
            </div>

            <div className="content-wrap">
              {/* 用户名 */}
              <div className="user-info">
                <div className="user-name">jack</div>
              </div>
              {/* 评论内容 */}
              <div className="root-reply">
                <span className="reply-content">这是一条评论回复</span>
                <div className="reply-info">
                  {/* 评论时间 */}
                  <span className="reply-time">{'2023-11-11'}</span>
                  {/* 评论数量 */}
                  <span className="reply-time">点赞数:{100}</span>
                  <span className="delete-btn">
                    删除
                  </span>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default App

App.scss

.app {
  width: 80%;
  margin: 50px auto;
}

.reply-navigation {
  margin-bottom: 22px;

  .nav-bar {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;

    .nav-title {
      display: flex;
      align-items: center;
      width: 114px;
      font-size: 20px;

      .nav-title-text {
        color: #18191c;
        font-weight: 500;
      }
      .total-reply {
        margin: 0 36px 0 6px;
        color: #9499a0;
        font-weight: normal;
        font-size: 13px;
      }
    }

    .nav-sort {
      display: flex;
      align-items: center;
      color: #9499a0;
      font-size: 13px;

      .nav-item {
        cursor: pointer;

        &:hover {
          color: #00aeec;
        }

        &:last-child::after {
          display: none;
        }
        &::after {
          content: ' ';
          display: inline-block;
          height: 10px;
          width: 1px;
          margin: -1px 12px;
          background-color: #9499a0;
        }
      }

      .nav-item.active {
        color: #18191c;
      }
    }
  }
}

.reply-wrap {
  position: relative;
}
.box-normal {
  display: flex;
  transition: 0.2s;

  .reply-box-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 50px;
  }

  .reply-box-wrap {
    display: flex;
    position: relative;
    flex: 1;

    .reply-box-textarea {
      width: 100%;
      height: 50px;
      padding: 5px 10px;
      box-sizing: border-box;
      color: #181931;
      font-family: inherit;
      line-height: 38px;
      background-color: #f1f2f3;
      border: 1px solid #f1f2f3;
      border-radius: 6px;
      outline: none;
      resize: none;
      transition: 0.2s;

      &::placeholder {
        color: #9499a0;
        font-size: 12px;
      }
      &:focus {
        height: 60px;
        background-color: #fff;
        border-color: #c9ccd0;
      }
    }
  }

  .reply-box-send {
    position: relative;
    display: flex;
    flex-basis: 86px;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s;

    & .send-text {
      position: absolute;
      z-index: 1;
      color: #fff;
      font-size: 16px;
    }
    &::after {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #00aeec;
      border-radius: 4px;
      opacity: 0.5;
      content: '';
    }
    &:hover::after {
      opacity: 1;
    }
  }
}
.bili-avatar {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
}
.bili-avatar-img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: none;
  border-radius: 50%;
  image-rendering: -webkit-optimize-contrast;
  transform: translate(-50%, -50%);
}

// 评论列表
.reply-list {
  margin-top: 14px;
}
.reply-item {
  padding: 22px 0 0 80px;
  .root-reply-avatar {
    position: absolute;
    left: 0;
    display: flex;
    justify-content: center;
    width: 80px;
    cursor: pointer;
  }

  .content-wrap {
    position: relative;
    flex: 1;

    &::after {
      content: ' ';
      display: block;
      height: 1px;
      width: 100%;
      margin-top: 14px;
      background-color: #e3e5e7;
    }

    .user-info {
      display: flex;
      align-items: center;
      margin-bottom: 4px;

      .user-name {
        height: 30px;
        margin-right: 5px;
        color: #61666d;
        font-size: 13px;
        line-height: 30px;
        cursor: pointer;
      }
    }

    .root-reply {
      position: relative;
      padding: 2px 0;
      color: #181931;
      font-size: 15px;
      line-height: 24px;
      .reply-info {
        position: relative;
        display: flex;
        align-items: center;
        margin-top: 2px;
        color: #9499a0;
        font-size: 13px;

        .reply-time {
          width: 86px;
          margin-right: 20px;
        }
        .reply-like {
          display: flex;
          align-items: center;
          margin-right: 19px;

          .like-icon {
            width: 14px;
            height: 14px;
            margin-right: 5px;
            color: #9499a0;
            background-position: -153px -25px;
            &:hover {
              background-position: -218px -25px;
            }
          }
          .like-icon.liked {
            background-position: -154px -89px;
          }
        }
        .reply-dislike {
          display: flex;
          align-items: center;
          margin-right: 19px;
          .dislike-icon {
            width: 16px;
            height: 16px;
            background-position: -153px -153px;
            &:hover {
              background-position: -217px -153px;
            }
          }
          .dislike-icon.disliked {
            background-position: -154px -217px;
          }
        }
        .delete-btn {
          cursor: pointer;
          &:hover {
            color: #00aeec;
          }
        }
      }
    }
  }
}

.reply-none {
  height: 64px;
  margin-bottom: 80px;
  color: #99a2aa;
  font-size: 13px;
  line-height: 64px;
  text-align: center;
}

8.2完成版本

8.2.1列表渲染

{/* 评论项 */}
                  {
                    list.map((item) => (
                        <div key={item.user.uid} className="reply-item">
                          {/* 头像 */}
                          <div className="root-reply-avatar">
                            <div className="bili-avatar">
                              <img
                                  className="bili-avatar-img"
                                  alt=""
                              />
                            </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>
                                <span className="delete-btn" onClick={()=>deleteItem(item.rpid)}>
删除
</span>
                              </div>
                            </div>
                          </div>
                        </div>
                    ))

8.2.2 删除评论

 const [list, setList] = useState(defaultList)
    const deleteItem = (rpid) => {
        setList(list.filter(item => item.rpid !== rpid));
    }

8.3.2渲染导航Tab和高亮显示

 <li className="nav-sort">
                        {/* 高亮类名： active */}
                        {tabs.map((tab) => (
                            <span
                                key={tab.type}
                                className={`nav-item ${tab.type === activeTabType ? 'active' : ''}`}
                                onClick={() => tabChange(tab.type)}>{tab.text}</span>
                        ))}

                        {/*<span className='nav-item' onClick={()=>tabChange('time')}>最热</span>*/}
                    </li>

 const [activeTabType, setActiveTabType] = useState(tabs[0].type); // 初始激活第一个 tab

    const tabChange = (type) => {
        setActiveTabType(type);
    };

8.3.4评论列表排序

安装lodash库

npm install lodash

const [list, setList] = useState(defaultList)
useEffect(() => {
  // 根据点赞数量排序（热度排序）
  const sortedComments = _.orderBy(list, 'like', 'desc')
  setList(sortedComments);
}, []); // 空依赖数组表示这个 effect 只在组件挂载和卸载时运行一次
const deleteItem = (rpid) => {
  setList(list.filter(item => item.rpid !== rpid));
}
const [activeTabType, setActiveTabType] = useState(tabs[0].type); // 初始激活第一个 tab

const tabChange = (type) => {
  setActiveTabType(type);
  if (type === 'hot') {
    setList(_.orderBy(list, 'like', 'desc'));
  } else if (type === 'time') {
    setList(_.orderBy(list, 'ctime', 'asc'));
  }
};

8.3.5 样式书写优化

npm install classnames

className={classNames('nav-item', {active: tab.type === activeTabType})}

9.React表单控制

9.1受控绑定

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

import {useState} from "react";


function App() {
  const [value, setValue] = useState('');
  return (
    <input type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      >

    </input>
  );
}

export default App;

9.2非受控绑定

概念：通过DOM的方式获取表单的输入数据

import {useRef} from "react";

function App() {
    var inputRef = useRef(null);
    const onChange = () => {
        console.log(inputRef.current.value)
    }
  return (
      <input type="text"
             ref={inputRef}
             onChange={onChange}>
      </input>
  );
}

export default App;

10.案例-B站评论案例

1.输入评论内容，并发布评论

1）进行表单受控绑定

<div className="reply-box-wrap">
  {/* 评论框 */}
  <textarea
    className="reply-box-textarea"
    placeholder="发一条友善的评论"
    value = {textValue}
    onChange={(e)=>setTextValue(e.target.value)}
    />
  {/* 发布按钮 */}
  <div className="reply-box-send">
    <div className="send-text" onClick={()=>sendComment(textValue)}>发布</div>
  </div>
</div>

2）点击“发布”触发发布评论

const [textValue, setTextValue] = useState('');
const sendComment = () => {
  setList([
    ...list,
    {
      // 评论id
      rpid: 3,
      // 用户信息
      user: user,
      // 评论内容
      content: textValue,
      // 评论时间
      ctime: new Date().toLocaleString(),
      like: 88,
    }
  ])
  setTextValue('');

}

3）非受控绑定输入框

<div className="reply-box-wrap">
  {/* 评论框 */}
  <textarea
    className="reply-box-textarea"
    placeholder="发一条友善的评论"
    value = {textValue}
    ref={inputRef}
    onChange={(e)=>setTextValue(e.target.value)}
    />
  {/* 发布按钮 */}
  <div className="reply-box-send">
    <div className="send-text" onClick={()=>sendComment(textValue)}>发布</div>
  </div>
</div>

4）光标聚焦

const sendComment = () => {
       setList([
           ...list,
           {
               // 评论id
               rpid: 3,
               // 用户信息
               user: user,
               // 评论内容
               content: textValue,
               // 评论时间
               ctime: new Date().toLocaleString(),
               like: 88,
           }
       ])
        setTextValue('');
       inputRef.current.focus();

    }

2.id处理和时间处理（uuid和day.js）

npm install dayjs --save
npm install uuid --save

具体代码实现

const sendComment = () => {
  setList([
    ...list,
    {
      // 评论id
      rpid: uuidV4(),
      // 用户信息
      user: user,
      // 评论内容
      content: textValue,
      // 评论时间
      ctime: dayjs(new Date()).format('MM-DD hh:mm'),
      like: 88,
    }
  ])
  setTextValue('');
  inputRef.current.focus();

}

11.React组件通信

概念：组件通信就是组件之间的数据传递，根据组件嵌套关系的不同，有不同的通信手段和方法

A-B 父子通信
B-C 兄弟通信
A-E 跨层通信

11.1 父子通信-父传子

11.1.1 基础实现

实现步骤：

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

2.子组件接收数据-子组件通过props参数接受数据

function Son(props) {
    return (<div>{props.name}</div>)
}

function App() {
    const  name = 'react'
  return (
     <div><Son name={name} /></div>
  );
}

export default App;

11.1.2props说明

props可以传递任意的合法数据，比如数字、字符串、布尔值、数组、对象、函数、JSX

props是只读对象

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

11.1.3特殊的prop-chilren

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

function Son(props) {
    return <div>{props.children}</div>
}
function App() {
    const  name = 'react'
  return (
    <Son>
        <span>this is span</span>
    </Son>
  );
}

export default App;

11.2 父子通信-子传父

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

function Son({ onGetMsg}) {
    const msg = "this is son msg";
    return (
        <div>
            <button onClick={() => onGetMsg(msg)}>send</button>
        </div>
    )
}
function App() {
    const getMsg = (msg) => {
        console.log(msg)
    }
   return (
       <div>
           <Son onGetMsg={getMsg}></Son>
       </div>
   );
}

export default App;

11.3兄弟组件通信

实现思路：

借助状态提升机制，通过共同的父组件进行相抵之间的数据传递

import {useState} from "react";

function A({onGetAName}) {
  const mag = "this is A name";
  return (
    <div>
      this is A,
      <button onClick={() => onGetAName(mag)}>send</button>
    </div>
  );
}

function B({name}) {
  return <div>this is B,{name}</div>
}

function App() {
  const [name, setName] = useState("");
  const getAName = (name) => {
    setName(name);
  }

  return (
    <div>
      <A onGetAName={getAName}></A>
      <B name={name}></B>
    </div>
  );
}

export default App;

11.4 跨层组件通信

实现步骤：

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

2.在顶层组件{App}中通过Ctx.Provider组件提供数据

3.在底层组件{B}中通过useContext钩子函数获取消费消息

import {createContext, useContext} from "react";

var MsgContext = createContext();

function A() {
    const msg = "this is A Component";
    return (
        <div>
            {msg}.
           <B/>
        </div>
    );
}

function B() {
    const msg = useContext(MsgContext);
    return <div>this is B,{msg}</div>
}

function App() {
    const msg = "this is App Component";
    return (
        <div>
            <MsgContext.Provider value={msg}>
                <A/>
            </MsgContext.Provider>
        </div>
    );
}

export default App;

12.React副作用管理-useEffect

12.1概念理解

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

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

12.2基础使用

需求：在组建渲染完毕之后，立刻从服务器端获取数据并展示在页面中

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

说明：

参数1是一个函数，可以把它叫做副作用函数，在函数内部可以放置要执行的操作
参数2是一个数组（可选参），在数组里放置依赖项，不同依赖项会影响第一个参数函数的执行，当是一个空数组的时候，副作用函数只会在组件渲染完毕之后执行一次

接口地址：http://geek.itheima.net/v1_0/channels

1）安装axios

npm install axios

2）发送请求

const [list, setList] = useState([]);
useEffect(() => {
  const getData = async () => {
    const res = await axios.get("http://geek.itheima.net/v1_0/channels");
    console.log(res.data.data.channels)

    setList(res.data.data.channels)
  }
  getData();

}, []);

3）展示数据

import axios from "axios";
import {useEffect, useState} from "react";


function App() {
  const [list, setList] = useState([]);
  useEffect(() => {
    const getData = async () => {
      const res = await axios.get("http://geek.itheima.net/v1_0/channels");
      console.log(res.data.data.channels)

      setList(res.data.data.channels)
    }
    getData();

  }, []);

  return (
    <div>
      <ul>
        {list.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  );
}

export default App;

12.3useEffect依赖说明

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

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

12.4清除副作用

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

useEffect(()=>{
  return ()=>{
    // 清除副作用
  }
},[])

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

import {useEffect, useState} from "react";

function Son() {
    useEffect(() => {
        const timer = setInterval(() => {
            console.log("我是子组件的定时器")
        }, 1000)
        return () => {
            clearInterval(timer)
            console.log("子组件的定时器被销毁了")
        }
    }, []);
    return (<div>我是子组件</div>)
}


function App() {
    const [show, setShow] = useState(true)

    return (
        <div>
            {show && <Son/>}
            <button onClick={() => setShow(false)}>卸载组件</button>
        </div>
    );
}

export default App;

13.自定义Hook

13.1自定义Hook实现

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

封装自定义hook通用思路：

1.声明一个以use打头的函数

2.在函数体内封装可复用的逻辑（只要是可复用的逻辑）

3.把组件中用到的状态或者回调return出去（以对象或者数组）

4.在哪个组件中要用这个逻辑，就执行这个函数，结构出来状态和回调进行使用

import {useState} from "react";

function useToggle() {
    const [value, setValue] = useState(true);
    const toggle = () => setValue(!value);
    return {
        value, toggle
    };
}


function App() {
    const {value, toggle} = useToggle();

    return (
        <div>
            {value && <div>this is div</div>}
            <button onClick={toggle}>toggle</button>
        </div>
    );
}

export default App;

13.2React Hooks使用规则

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

2.只能在组件的顶层调用，不能嵌套在if、for、其它函数中

14.案例-优化B站评论案例

14.1使用接口的方式获取评论列表并渲染

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

下载json-server到当前项目

npm i json-server -D

在项目文件夹下创建db.json文件

{
  "list": [
    {
      "rpid": 3,
      "user": {
        "uid": "13258165",
        "avatar": "http://toutiao.itheima.net/resources/images/98.jpg",
        "uname": "周杰伦"
      },
      "content": "哎哟，不错哦",
      "ctime": "10-18 08: 15",
      "like": 126
    },
    {
      "rpid": 2,
      "user": {
        "uid": "36080105",
        "avatar": "http://toutiao.itheima.net/resources/images/98.jpg",
        "uname": "许嵩"
      },
      "content": "我寻你千百度 日出到迟暮",
      "ctime": "11-13 11: 29",
      "like": 88
    },
    {
      "rpid": 1,
      "user": {
        "uid": "30009257",
        "avatar": "http://toutiao.itheima.net/resources/images/98.jpg",
        "uname": "黑马前端"
      },
      "content": "学前端就来黑马",
      "ctime": "10-19 09: 00",
      "like": 66
    }
  ]
}

在package.json下添加启动命令

"serve": "json-server db.json --port 3004"

2）使用useEffect调用接口获取数据

封装Hook调用接口函数

function useGetList() {
  const [list, setList] = useState([]);
  useEffect(() => {
    async function getList() {
      const res = await axios.get('http://localhost:3004/list');
      setList(res.data);
    }

    getList()

  }, []);

  return {
    list,
    setList
  }

}

调用Hook函数

 const {list, setList} = useGetList();

14.2把评论中的每一项抽象成一个独立的组件实现渲染

1）封装组件

function Item({item, onDel}) {
  return (
    <div key={item.rpid} className="reply-item">
      {/* 头像 */}
      <div className="root-reply-avatar">
        <div className="bili-avatar">
          <img
            className="bili-avatar-img"
            alt=""
            />
        </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>
            <span className="delete-btn" onClick={() => onDel(item.rpid)}>
              删除
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}

2）调用组件

<div className="reply-list">
  {/* 评论项 */}
  {
    list.map((item) => (
      <Item key={item.id} item={item} onDel={deleteItem}/>
    ))
  }
</div>