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

介绍

开发工具
- vscode
- chrome 插件 React Developer Tools: React debugging tools
- 转化工具：html-to-jsx
快速入门

使用

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 的地理数据编辑工具
CodeMirror 是一款网络代码编辑器组件。它可用于网站的文本输入框，支持多种编辑功能，并具有丰富的编程接口，允许进一步扩展
fingerprintjs JavaScript 库，用于在浏览器中收集设备指纹信息，以识别用户身份
auth.js
react-native-echarts React Native ECharts Library

React 介绍

介绍

使用

jsx

useState

UseStateDemo ...

useReducer

UseReducerDemo ...

useContext

UseContextDemo ...

useMemo

UseMemoDemo ...

useCallback

UseCallbackDemo ...

useRef

UseRefDemo ...

useNavigate

useParams

普通组件

常见库

Help

React 介绍

介绍

使用

jsx

useState

UseStateDemo ...

useReducer

UseReducerDemo ...

useContext

UseContextDemo ...

useMemo

UseMemoDemo ...

useCallback

UseCallbackDemo ...

useRef

UseRefDemo ...

useNavigate

useParams

普通组件

常见库

Help

Cookie Notice!