React初级知识点梳理-2024 - 白白的白豆腐白白的白豆腐

React初级知识点梳理

1. JSX 和函数式组件

简单的函数式组件

这是 React 中最基本的概念，创建一个简单的函数式组件：

import React from 'react';

const Contact = () => {
  return <h1> Contact </h1>;
};

export default Contact;

相关文件：Contact.js【19†source】

使用 JSX 渲染列表

渲染一个任务列表：

import { Task } from './Task';

function App() {
  const todoList = [
    { id: 1, taskName: 'Learn React', completeFlag: false },
    { id: 2, taskName: 'Write Code', completeFlag: true },
  ];

  return (
    <div className="Content">
      {todoList.map((task) => {
        return (
          <Task
            key={task.id}
            taskName={task.taskName}
            id={task.id}
            completeFlag={task.completeFlag}
          />
        );
      })}
    </div>
  );
}

相关文件：App.js【16†source】

2. 状态管理（useState）

基本使用 useState 管理状态

useState 是一个基本的 React Hook，用来在函数式组件中管理状态。

import { useState } from 'react';

function App() {
  const [inputValue, setInputValue] = useState('');
  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>当前输入值：{inputValue}</p>
    </div>
  );
}

相关文件：App.js【16†source】

计数器示例

通过 useState 来实现简单的加减计数器。

import { useGetNumer } from "./useGetNumer";

export const Calculator = () => {
  const { count, jia, jian, restart } = useGetNumer();

  return (
    <div>
      <p>{count}</p>
      <button onClick={jia}>+</button>
      <button onClick={jian}>-</button>
      <button onClick={restart}>restart</button>
    </div>
  );
};

相关文件：Calculator.js【39†source】

import { useState } from "react";
export const useGetNumer = (initialValue = 0) => {
  const [count, setCount] = useState(initialValue);

  const jia = () => {
    setCount((prev) => prev + 1);
  };
  const jian = () => {
    setCount((prev) => prev - 1);
  };
  const restart = () => {
    setCount(0);
  };

  return { count, jia, jian, restart };
};

相关文件：useGetNumer.js【42†source】

3. 使用 Context 进行状态共享

创建和使用上下文（Context）

通过 createContext 和 useContext 实现跨组件的数据共享。

import { createContext, useState, useContext } from 'react';

export const AppContext = createContext();

function App() {
  const [userName, setUserName] = useState('TK');

  return (
    <AppContext.Provider value={{ userName, setUserName }}>
      <Home />
      <ChangeProfile />
    </AppContext.Provider>
  );
}

const Home = () => {
  const { userName } = useContext(AppContext);
  return <h1>Home, name is {userName}</h1>;
};

const ChangeProfile = () => {
  const { setUserName } = useContext(AppContext);
  return (
    <div>
      <input
        onChange={(event) => {
          setUserName(event.target.value);
        }}
      />
    </div>
  );
};

相关文件：App.js【18†source】，Home.js【21†source】，ChangeProfile.js【24†source】

4. 自定义 Hook

自定义 Toggle Hook

通过自定义 Hook useToggle 实现布尔状态的切换：

import { useState } from "react";

export const useToggle = (initialValue = false) => {
  const [state, setIsVisible] = useState(initialValue);
  const toggle = () => {
    setIsVisible((prev) => !prev);
  };

  return { state, toggle };
};

使用 useToggle:

import { useToggle } from './useToggle';

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

  return (
    <div>
      <button onClick={toggle}>{state ? 'Hide' : 'Show'}</button>
      {state && <h1>Hidden text</h1>}
    </div>
  );
}

相关文件：useToggle.js【43†source】

5. 路由管理（react-router-dom）

使用 React Router 进行页面导航

通过 react-router-dom 实现页面间的路由和导航。

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { Home } from './pages/Home';
import { Menu } from './pages/Menu';
import { Contact } from './pages/Contact';
import { Navbar } from './pages/Navbar';

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/menu' element={<Menu />} />
        <Route path='/contact' element={<Contact />} />
      </Routes>
    </Router>
  );
}

相关文件：App.js【18†source】，Navbar.js【23†source】

6. 表单处理与验证

使用 react-hook-form 和 yup 进行表单验证

通过 react-hook-form 和 yup 进行表单验证。

import * as yup from 'yup';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';

export const Forms = () => {
  const schema = yup.object().shape({
    fullName: yup.string().required("名字不能为空!"),
    age: yup.number().positive().integer().min(18).required(),
    email: yup.string().email().required(),
    password: yup.string().min(4).max(10).required(),
    confirmPassword: yup
      .string()
      .oneOf([yup.ref("password")], "密码不一致!")
      .required(),
  });

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  });

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" placeholder="name..." {...register("fullName")} />
      <p>{errors.fullName?.message}</p>
      <input type="number" placeholder="age..." {...register("age")} />
      <p>{errors.age?.message}</p>
      <input type="text" placeholder="email" {...register("email")} />
      <p>{errors.email?.message}</p>
      <input type="password" placeholder="password" {...register("password")} />
      <p>{errors.password?.message}</p>
      <input type="password" placeholder="confirmPassword" {...register("confirmPassword")} />
      <p>{errors.confirmPassword?.message}</p>
      <input type="submit" />
    </form>
  );
};

相关文件：Form.js【20†source】

7. React Query 进行数据请求

使用 React Query 进行数据获取

通过 @tanstack/react-query 来获取数据。

import { useQuery } from "@tanstack/react-query";
import Axios from "axios";

export const useGetCat = () => {
  const { data, refetch, isLoading: isCatLoading } = useQuery(["cat"], async () => {
    return Axios.get("https://catfact.ninja/fact").then((res) => res.data);
  });

  const refetchData = () => {
    refetch();
  };

  return { data, isCatLoading, refetchData };
};

使用 useGetCat:

import { useGetCat } from "./useGetCat";

export const Cat = () => {
  const { data: catData, isLoading, refetchData } = useGetCat();

  if (isLoading) return <h1>Loading...</h1>;

  return (
    <div>
      <h1>{catData?.fact}</h1>
      <button onClick={refetchData}>Refresh</button>
    </div>
  );
};

相关文件：useGetCat.js 【41†source】，Cat.js 【40†source】

8. 使用 Redux 进行状态管理

基本 Redux 配置

Redux 是一个用于管理应用状态的工具，适合中大型项目的状态管理需求。

// store.js
import { createStore } from 'redux';

// 初始状态
const initialState = {
  count: 0,
};

// reducer 函数
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

// 创建 store
export const store = createStore(counterReducer);

在组件中使用 Redux

在组件中使用 useSelector 和 useDispatch 来获取状态和分发操作。

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const Counter = () => {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
    </div>
  );
};

export default Counter;

在应用中连接 Redux Store

通过 Provider 组件将 Redux store 连接到整个应用。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

以上步骤完成后，您的应用程序将能够使用 Redux 来管理全局状态。

9. 生命周期方法 (useEffect)

使用 useEffect 处理副作用

useEffect 用于处理副作用，例如组件挂载、卸载、数据获取等。

import { useState, useEffect } from 'react';

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('组件已挂载或更新');
    return () => {
      console.log('组件将卸载');
    };
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

10. 条件渲染

使用三元运算符实现条件渲染

通过三元运算符实现条件渲染：

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in</h1>}
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? 'Logout' : 'Login'}
      </button>
    </div>
  );
}

11. 事件处理

按钮点击事件

处理按钮点击事件：

function App() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return (
    <button onClick={handleClick}>Click me</button>
  );
}

12. 状态提升

将状态提升以共享给多个组件

将状态提升到父组件，以便共享给多个子组件：

function App() {
  const [sharedValue, setSharedValue] = useState('Hello');

  return (
    <div>
      <ChildA sharedValue={sharedValue} />
      <ChildB setSharedValue={setSharedValue} />
    </div>
  );
}

const ChildA = ({ sharedValue }) => {
  return <h1>{sharedValue}</h1>;
};

const ChildB = ({ setSharedValue }) => {
  return (
    <button onClick={() => setSharedValue('Hello from ChildB')}>
      Update Value
    </button>
  );
};

13. Portals (传送门)

使用 Portals 将组件渲染到父组件之外的 DOM 节点

使用 ReactDOM.createPortal：

import ReactDOM from 'react-dom';

function Modal({ children }) {
  return ReactDOM.createPortal(
    <div className="modal">
      {children}
    </div>,
    document.getElementById('modal-root')
  );
}

14. 高阶组件 (HOC)

创建一个高阶组件以复用逻辑

高阶组件是一个接受组件并返回新组件的函数：

function withLogging(WrappedComponent) {
  return function WrappedWithLogging(props) {
    useEffect(() => {
      console.log('Component mounted');
      return () => {
        console.log('Component unmounted');
      };
    }, []);

    return <WrappedComponent {...props} />;
  };
}

15. Context 的优化 (useMemo)

使用 useMemo 优化 Context 以避免不必要的渲染

import { createContext, useState, useMemo, useContext } from 'react';

export const AppContext = createContext();

function App() {
  const [userName, setUserName] = useState('TK');
  const contextValue = useMemo(() => ({ userName, setUserName }), [userName]);

  return (
    <AppContext.Provider value={contextValue}>
      <Home />
    </AppContext.Provider>
  );
}

const Home = () => {
  const { userName } = useContext(AppContext);
  return <h1>Home, name is {userName}</h1>;
};

以上补充了更多 React 的重要概念，包括生命周期方法、条件渲染、事件处理、状态提升、Portals、高阶组件和 Context 优化等内容。

TOFU'S BLOG