前记

之前大二暑假时候学过react18,不过是class类型的,最近在工作中遇到了用react重构的需求,现在捡起来重新学一下最新的react18用函数类型（没有需求没有动力）

不多说,上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// app.jsx
import React, { useState } from "react";

export default function App() {//定义主组件
  const [advice, setAdvice] = useState("");
  const [count, setCount] = useState("");
  async function getAdvice(params) {
    const res = await fetch("url");
    const data = await res.json();
    setAdvice(data.slip.advice);
    setCount((c) => c + 1);
  }
  useEffect(() => {
    //定义useEffect进行初始化,useEffect 钩子在组件挂载时调用getAdvice函数,以获取初始的建议数据。空数组[]作为第二个参数,确保该副作用只在组件挂载时执行一次。
    getAdvice();
  }, []);

  return (
    <div>
      <h1>{advice}</h1>
      <button onclick={getAdvice}>Get advice</button>
      <Message count={count}></Message>
    </div>
  );
}

function Message(props) {//简单的函数组件
  return (
    <p>
      you have read <strong>{props.count}</strong> pieces of advice
    </p>
  );
}

基本语法

jsx基本语法

  • 变量绑定
    • 在html标签中使用{},内可绑定字符串,数字,数组（基本类型）,html元素,三元表达式, API调用
  • 插值语法如果非要展示对象类型的话,使用JSON.stringfy();
  • 事件绑定 驼峰 onClick ,如果需要传参数使用高阶函数,不需要直接就传函数体
  • 如使用泛型,他会把泛型理解成一个dom,纠正泛型
  • 绑定class需要用className,多个class 需要 模版字面量 中间间隔空格 ,id就正常
  • 添加html片段 <div dangerouslySetInnerHTML={{ __html: value }}></div>
  • 遍历dom
    1
    2
    3
    4
    5
    {
        arr.map((item) => {
            return <div>{item}</div>
        })
    }
  • 条件渲染
    1
    2
    3
    {
       flag ? <div>真的</div> : <div>假的</div>
    }

useEffect(effect, dependencies)

  • effect：一个函数,包含你想要执行的副作用代码。
  • dependencies：一个数组,包含依赖项。当数组中的任何一个值发生变化时,effect 函数会重新执行。如果传入一个空数组 [],effect 函数只会在组件挂载和卸载时执行。