React 介绍

发布时间： 更新时间： 总字数：2494 阅读时间：5m 作者： IP上海 分享 网址

React 用于构建 Web 和原生交互界面的库，React 组件是 JavaScript 函数

介绍

使用

jsx

  • JSX 是 JavaScript 语法扩展，可以让你在 JavaScript 文件中书写类似 HTML 的标签
    • 它是由 React 推广的 JavaScript 语法扩展。将 JSX 标签与相关的渲染逻辑放在一起，使得创建、维护和删除 React 组件变得容易。
    • 在 JSX 中通过大括号 {} 使用 JavaScript，示例：<h1>{name}'s To Do List</h1>
    • 使用双大括号{{}}：JSX 中的 CSS 和 对象，示例：<ul style={{ backgroundColor: 'black', color: 'pink' }}>
      • 在 JSX 中看到 {{ 和 }} 时，需知道它只不过是包在大括号里的一个对象
  • 在 React 中，通常使用 onSomething 命名代表事件的 props，使用 handleSomething 命名处理这些事件的函数

useState

useState Hook 会重用作为初始 state 传入的值以确定值的类型

    const [num,setNum] = React.useState(0)
    React.useEffect(() => {
        console.log("监听到num变化, num is"+ number)
    },[num])

    // 更新
    setNum(1)

使用场景：

  • 当你想要整合两个组件时，将它们的 state 移动到共同的父组件中。
  • 然后在父组件中通过 props 把信息传递下去。
  • 最后，向下传递事件处理程序，以便子组件可以改变父组件的 state 。
  • 考虑该将组件视为“受控”（由 prop 驱动）或是“不受控”（由 state 驱动）是十分有益的。
UseStateDemo ...
import { useState } from 'react';

// 导出一个名为UseStateDemo的函数组件
export default function UseStateDemo() {
  // 使用useState钩子，初始化count为0
  const [count, setCount] = useState(0);

  // 定义一个名为increment的函数，用于增加count的值
  const increment = () => {
    setCount(count + 1);
  };

  return (
    <>
      <code>
        1. 使用 useState 创建的状态是独立的，每次重新渲染组件时都会被重新初始化 <br />
        2. useState 的参数只会在初始化阶段被调用一次
        <br />
        3. setCount(prevCount => prevCount + 1);
      </code>
      {/* 显示count的值 */}
      <p>Count: {count}</p>
      {/* 点击按钮时调用setCount函数，将count的值减1 */}
      <button onClick={() => setCount(count - 1)}>Decrement</button>
      {/* 点击按钮时调用increment函数 */}
      <button onClick={increment}>Increment</button>
    </>
  );
}

source repo / download raw

useReducer

useReducer 是一个更复杂的 Hook，它接受一个 reducer 函数和一个初始 state 作为参数，并将从初始 state 推断出 reducer 函数的类型。

UseReducerDemo ...
import { useReducer } from 'react';

const initialState = 0;
function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

export default function UseReducerDemo() {
  const [count, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      <code>
        1. useReducer是React中的一个常用Hook，用于管理复杂的状态逻辑
        <br />
        2. useReducer 通过接受一个reducer函数和一个初始状态值，返回一个状态值和一个派发action的函数 <br />
        3. const [state, dispatch] = useReducer(reducer, initialState); <br />
        4. reducer函数接受两个参数，当前的状态值state和派发的action，根据action的类型返回新的状态值 <br />
        5. dispatch函数用于派发action，action是一个对象，包含一个type属性，用于指定要执行的操作类型 <br />
        6. 在组件中，可以通过调用dispatch函数来派发action，从而更新状态值 <br />
        7. 在组件中，可以通过访问state来获取当前的状态值 <br />
        8. 在组件中，可以通过访问dispatch来派发action，从而更新状态值 <br />
        9. const [state, dispatch] = useReducer(reducer, initialState, init?); <br />
      </code>

      <div>
        <p>Count: {count}</p>
        <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
        <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
      </div>
    </>
  );
}

source repo / download raw

useContext

useContext 是一种无需通过组件传递 props 而可以直接在组件树中传递数据的技术。它是通过创建 provider 组件使用，通常还会创建一个 Hook 以在子组件中使用该值。

UseContextDemo ...
import React, { useContext } from 'react';

const MyContext = React.createContext();

function ChildComponent() {
  const sharedValue = useContext(MyContext);
  return <div>{sharedValue}</div>;
}

export default function UseContextDemo() {
  const sharedValue = 'Hello, World!';

  return (
    <>
      <div>
        <code>
          1. useContext 是 React 中的一个自定义 Hook，用于在函数组件中获取上下文（Context）的值 <br />
          2. 通过 useContext，提供读取和订阅功能，可以避免在组件树中一层一层地传递上下文 <br />
        </code>
      </div>
      <MyContext.Provider value={sharedValue}>
        <ChildComponent />
      </MyContext.Provider>
    </>
  );
}

source repo / download raw

useMemo

useMemo 会从函数调用中创建/重新访问记忆化值，只有在第二个参数中传入的依赖项发生变化时，才会重新运行该函数。

UseMemoDemo ...
import { useMemo } from 'react';

const MyComponent = ({ a, b }) => {
  const result = useMemo(() => {
    console.log('Expensive calculation');
    return a + b;
  }, [a, b]);

  return <div>Result: {result}</div>;
};

export default function UseMemoDemo() {
  return (
    <>
      <code>
        1. useMemo是React的一个自定义Hook，用于在函数组件中进行性能优化 <br />
        2. useMemo 的作用是缓存计算结果，并在依赖项发生变化时重新计算 <br />
      </code>
      <MyComponent a={1} b={2} />
    </>
  );
}

source repo / download raw

useCallback

useCallback 会在第二个参数中传入的依赖项保持不变的情况下，为函数提供相同的引用。

UseCallbackDemo ...
import { useCallback } from 'react';

const MyComponent = ({ onClick }) => {
  const handleClick = useCallback(() => {
    console.log('Button clicked2');
    onClick();
  }, [onClick]);
  return <button onClick={handleClick}>Click me</button>;
};

export default function UseCallbackDemo() {
  return (
    <>
      <code>
        1. useCallback是React的一个自定义Hook，用于在函数组件中缓存回调函数，以避免在每次渲染时创建新的回调函数
        <br />
        2. useCallback 可以用于性能优化，特别是在将回调函数作为props传递给子组件时 <br />
        3. useCallback 接受两个参数：一个回调函数和一个依赖数组 <br />
        4. 当依赖数组中的值发生变化时，useCallback 会重新创建回调函数 <br />
      </code>
      <MyComponent onClick={() => console.log('Button clicked1')} />
    </>
  );
}

source repo / download raw

useRef

  • 使用 ref 可以确保：
    • 可以在重新渲染之间 存储信息（普通对象存储的值每次渲染都会重置）
    • 改变它 不会触发重新渲染（状态变量会触发重新渲染）
    • 对于组件的每个副本而言，这些信息都是本地的（外部变量则是共享的）
  • ref 和 state 的不同之处
UseRefDemo ...
import { useRef, useState, useEffect } from 'react';

export default function UseRefDemo() {
  let count = 0;
  let countRef = useRef(0);
  let [label, setLabel] = useState(0);
  const handleClick = () => {
    count++;
    countRef.current = countRef.current + 1;
  };

  useEffect(() => {
    if (label > 0) {
      handleClick();
      console.log(count, countRef.current, label);
    }
  }, [label]);

  return (
    <>
      <code>
        1. useRef 是 React 提供的一个 Hook，用于在函数组件中获取持久化的引用。它返回一个可变的 ref 对象，其 .current
        属性可以存储和读取任意可变值 <br />
        2. useRef 的值在组件的整个生命周期内保持不变，即使组件重新渲染 <br />
        3. useRef 的值不会触发组件重新渲染 <br />
        4. useRef 的值可以用来存储和访问 DOM 元素，也可以用来存储和访问非 DOM 元素 <br />
        5. useRef 的值可以用来存储和访问函数组件的状态 <br />
        6. useRef 的值可以用来存储和访问函数组件的属性 <br />
        7. useRef 的值可以用来存储和访问函数组件的上下文 <br />
        8. useRef 的值可以用来存储和访问函数组件的子组件 <br />
        9. useRef 的值可以用来存储和访问函数组件的父组件 <br />
        10. useRef 的值可以用来存储和访问函数组件的兄弟组件 <br />
        11. 不适用 useRef 定义的普通变量，每次重新渲染时，数据会被还原，无法保存数据 <br />
        <br />
      </code>

      <div style={{ padding: '20px' }}>
        <div>count:{count}</div>
        <div>countRef:{countRef.current}</div>
        <div>label:{label}</div>
        <button onClick={() => setLabel((label) => label + 1)}>Increase Count</button>
      </div>

      <p>控制台输出</p>
      <code>
        1 1 1 <br />
        1 2 2 <br />
        1 3 3 <br />
        1 4 4 <br />
        1 5 5 <br />
      </code>
    </>
  );
}

source repo / download raw

useNavigate

  • useNavigate 钩子函数返回一个可以控制跳转的函数；比如可以用在提交完表单后跳转到其他页面。

useParams

  • useParams 钩子函数返回动态路由的匹配参数键值对对象；子路由中会集成父路由的动态参数

普通组件

常见库

  • React Flow 一个高度可定制的 React 组件，用于构建基于节点的编辑器和互动图表
  • antvis/L7Editor 基于 L7 的地理数据编辑工具
    最近更新
    相关文章
    最新评论
    Home Archives Categories Tags Statistics
    本文总阅读量 次 本站总访问量 次 本站总访客数 人