JavaScript进阶教程 - React（Hooks、Context、Redux）

React是一个用于构建用户界面的JavaScript库，它通过组件化的方式促进了高效的UI开发。React的核心思想是声明式编程和组件驱动的开发。随着React 16.8的发布，引入了Hooks，这是一项功能强大的新特性，允许你在不编写类的情况下使用更多React特性。此外，Context API和Redux是管理应用状态的常用工具。

Hooks

Hooks是React 16.8中新增的特性，允许在函数组件中使用状态和其他React特性。Hooks提供了一种更直接的API来使用React的特性，如状态管理、副作用、上下文、引用和自定义Hooks。

• useState：让函数组件持有自己的状态。

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

• useEffect：用于处理副作用，相当于类组件的生命周期方法。

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // 仅在count变化时更新
  

• useContext：让你在函数组件中使用React Context，无需使用消费者组件。

  const theme = useContext(ThemeContext);
  

Context API

Context提供了一种在组件树中传递数据的方法，无需手动传递props。它用于解决组件之间共享状态的问题，尤其是对于一些需要在许多层级中访问的数据，如主题、语言偏好等。

const ThemeContext = React.createContext('light');

function App() {
    return (
        <ThemeContext.Provider value="dark">
            <Toolbar />
        </ThemeContext.Provider>
    );
}

function Toolbar(props) {
    return (
        <div>
            <ThemedButton />
        </div>
    );
}

function ThemedButton() {
    const theme = useContext(ThemeContext);
    return <button theme={theme}>I am styled by theme context!</button>;
}

Redux

Redux是一个独立于React的状态管理库，但经常与React一起使用。它使用单一不可变状态树（称为store）来存储整个应用的状态，使得状态的更新可预测且易于追踪。

• Actions：是描述发生了什么的普通JavaScript对象。
• Reducers：是根据当前状态和action来计算新状态的纯函数。
• Store：将状态、action和reducer联系在一起的对象。

使用Redux时，你通常会用到react-redux库提供的<Provider>组件和connect()高阶组件，但随着React Redux的useSelector和useDispatch Hooks的引入，连接组件变得更加简单和直接。

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

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

    return (
        <div>
            <button onClick={() => dispatch({ type: 'INCREMENT' })}>
                Increment
            </button>
            <span>{count}</span>
        </div>
    );
}

总结

React通过Hooks使函数组件更加强大和灵活，Context API提供了一种在组件树中共享状态的方法，而Redux提供了一个可预测的状态容器，适用于大型应用程序。这些工具和概念结合起来，为React开发者提供了强大的方法来构建和管理现代Web应用的UI和状态。