react入门

进行一个 react 的速通

1. 建立项目

建议用 vite 搭建，很快

1	npm create vite@latest

然后选 react 模板

2. JSX

JSX (JavaScipt XML) 就是 react 中的 HTML，通过 js 的自身可编程能力来创建 HTML 结构

将命令式写法简化为声明式写法

3. 函数式组件

新 react 基本不用 class 组件了，全用函数式组件。它们的各种东西也受影响，想做函数式编程

函数式组件例如:

function Hello() {
    return <div style={{ color: 'red' }}>Hello World!</div>;
}

function App() {
    return (
        <div className="App">
            <Hello></Hello>
        </div>
    );
}

注意函数名首字母大写，return 的也只能有一个根组件

4. 组件通信

父传子

父组件提供需要传递的数据 state
给子组件标签添加属性值为 state 中的数据
函数式子组件直接通过参数获取 props 对象，接收父组件中传过来的值

子传父

本质是子组件调用父组件传递的函数，并将想要传递的数据当成函数的实参

5. hooks

为了拥抱函数式编程所做的东西。因为真正的函数式编程不允许函数有副作用，但是这是前端，组件不可避免的需要有储存信息，交互其他东西的功能，就引入了 hooks 来做这些事，假装自己还是函数式编程。

Hook 就是 Javascript 函数，但是只能在函数外层调用 Hook，不要在循环、条件判断或者子函数中调用；只能在 React 的函数组件和自定义 Hook 中调用 Hook。不要在其他 JavaScript 函数中调用

useState

useState 是一个函数，它接受初始状态作为参数，并返回一个包含两个元素的数组：当前状态和一个用于更新状态的函数。比如：

1	const [count, setCount] = useState(0);

在这个例子中，count 是当前的状态（初始值为 0），而 setCount 是一个函数，可以用于更新 count 的值。

useEffect

useEffect 允许在函数组件中执行副作用操作。它接受一个函数（通常称之为“effect”）作为参数。可以在 effect 中执行任何副作用操作，例如数据获取、订阅或手动修改 DOM。useEffect 还可以返回一个函数，该函数将在组件卸载前或更新前执行，可以在这个函数中执行任何清理操作。

useEffect(() => {
    document.title = `You clicked ${count} times`;

    return () => {
        // cleanup logic goes here
    };
}, [count]); // 仅在 count 更改时更新

useRef

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。

1
2
3

const inputRef = useRef(null);
// you can access its current value like this
console.log(inputRef.current);

useContext

useContext 接受一个上下文对象（React.createContext 的返回值）并返回该上下文的当前值。当前的上下文值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。

1
2
3

const ThemeContext = React.createContext('light');
const theme = useContext(ThemeContext);
console.log(theme); // "light"

useReducer

useReducer 是一个替代 useState 的 Hook，它接受一个形如 (state, action) => newState 的 reducer，并返回当前的状态以及与其配套的 dispatch 方法。

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);
    return (
        <>
            Count: {state.count}
            <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
            <button onClick={() => dispatch({ type: 'increment' })}>+</button>
        </>
    );
}