全局安装脚手架

npm i create-react-app -g

创建项目

create-react-app (project-name项目名称)

react查看版本号

create-react-app --version

TypeScript 下载命令

1.2.1 全局安装typescripts

npm install -g typescript

1.2.2 ts-node 安装和使用

npm install -g ts-node

TypeScript创建项目

create-react-app project --template typescript

npm run eject

进度条

npm i nprogress

react常用的hooks

1. useState

使用场景：用于在函数组件中管理状态。可以用于跟踪和更新组件的内部状态，例如表单输入、开关状态、计数器等。

案例：

import React, { useState } from 'react';  
  
function Counter() {  
  const [count, setCount] = useState(0);  
    
  function handleClick() {  
    setCount(count + 1);  
  }  
    
  return (  
    <button onClick={handleClick}>  
      Count: {count}  
    </button>  
  );  
}

2.useEffect

使用场景：用于在函数组件中处理副作用，如数据获取、订阅、手动更改 DOM 等。它接受两个参数：一个副作用函数和一个依赖数组。当依赖数组中的任何一个值发生变化时，副作用函数将被调用。

案例：

import React, { useState, useEffect } from 'react';  
  
function FetchData() {  
  const [data, setData] = useState([]);  
    
  useEffect(() => {  
    async function fetchData() {  
      const response = await fetch('/api/data');  
      const jsonData = await response.json();  
      setData(jsonData);  
    }  
      
    fetchData();  
  }, []); // 空数组表示只在组件挂载时执行一次  
    
  return (  
    <div>  
      <h1>Fetched Data</h1>  
      <ul>  
        {data.map((item) => (  
          <li key={item.id}>{item.name}</li>  
        ))}  
      </ul>  
    </div>  
  );  
}

3. useContext

使用场景：跨组件传递数据，避免“prop drilling”（即避免通过多层嵌套组件手动传递 props）。

案例：

// 父组件
import React, { createContext, useContext } from 'react';  
  
const ThemeContext = createContext('light');  
  
function App() {  
  return (  
    <ThemeContext.Provider value="dark">  
      <ThemedButton />  
    </ThemeContext.Provider>  
  );  
}  
  
// 子组件
function ThemedButton() {  
  const theme = useContext(ThemeContext);  
  return <button style={{ backgroundColor: theme === 'dark' ? 'black' : 'white' }}>Theme Button</button>;  
}

4. useReducer

使用场景：管理复杂的状态逻辑。它接受一个 reducer 函数和一个初始状态，并返回一个包含当前状态和一个派发操作的数组。

案例：

import React, { useReducer } from 'react';  
  
const initialState = { count: 0 };  
  
function reducer(state, action) {  
  switch (action.type) {  
    case 'increment':  
      return { count: state.count + 1 };  
    case 'decrement':  
      return { count: state.count - 1 };  
    default:  
      throw new Error();  
  }  
}  
  
function Counter() {  
  const [state, dispatch] = useReducer(reducer, initialState);  
    
  function handleIncrement() {  
    dispatch({ type: 'increment' });  
  }  
    
  function handleDecrement() {  
    dispatch({ type: 'decrement' });  
  }  
    
  return (  
    <>  
      <button onClick={handleIncrement}>+</button>  
      <span>{state.count}</span>  
      <button onClick={handleDecrement}>-</button>  
    </>  
  );  
}

5. useCallback

使用场景：

缓存回调函数：当你需要将回调函数作为props传递给子组件，并且这些回调函数在父组件的多次渲染中不应该改变时，可以使用useCallback来缓存这些回调函数。这有助于避免子组件因为接收到新的函数引用而进行不必要的重新渲染。
优化性能：对于频繁创建和调用的回调函数，使用useCallback可以减少不必要的函数创建，从而提升性能。

案例：

import React, { useState, useCallback } from 'react';  
  
function ParentComponent() {  
  const [count, setCount] = useState(0);  
  
  // 使用useCallback缓存回调函数  
  const handleIncrement = useCallback(() => {  
    setCount(count + 1);  
  }, [count]); // 注意依赖项数组，当count变化时，会重新创建函数  
  
  return (  
    <div>  
      <p>Count: {count}</p>  
      <ChildComponent onIncrement={handleIncrement} />  
    </div>  
  );  
}  
  
function ChildComponent({ onIncrement }) {  
  // 假设ChildComponent内部使用了React.memo或其他优化手段  
  // 来避免因为props变化而重新渲染  
  return <button onClick={onIncrement}>Increment</button>;  
}

6.useMemo

使用场景：

缓存计算结果：当你需要在组件渲染过程中执行一些昂贵的计算，并且这些计算结果在组件的多次渲染中可能保持不变时，可以使用useMemo来缓存这些计算结果。这样，在后续的渲染中，如果依赖项没有变化，就可以直接使用缓存的结果，而无需重新计算。
优化渲染性能：通过减少不必要的计算，useMemo可以帮助提升组件的渲染性能，特别是在处理大量数据或复杂逻辑时。

案例（计算数组总和）

import React, { useState, useMemo } from 'react';  
  
function ExpensiveCalculationComponent() {  
  const [numbers, setNumbers] = useState([1, 2, 3, 4, 5]);  
  
  // 使用useMemo缓存计算结果  
  const sum = useMemo(() => {  
    return numbers.reduce((acc, val) => acc + val, 0);  
  }, [numbers]); // 注意依赖项数组，当numbers变化时，会重新计算  
  
  return (  
    <div>  
      <p>Sum: {sum}</p>  
      <button onClick={() => setNumbers([...numbers, Math.floor(Math.random() * 10)])}>  
        Add Random Number  
      </button>  
    </div>  
  );  
}