React Context API (React 上下文 API)

上下文 API 是一種很好的方法,讓我們在應用程式中傳遞狀態,而不需要使用 props。 上下文 API 的引入可以讓我們在應用程式中傳遞狀態 (並且允許該狀態在多個組件之間更新),而不需要使用 props。 React 團隊建議,在只有幾個層級的子組件需要傳遞狀態的情況下,仍然使用 props,因為相比於上下文 API,props 是更簡單的 API。 在許多情況下,使用上下文 API 可以避免使用 Redux,大大簡化我們的應用程式,同時學習如何使用 React。 它是如何運作的呢? 你可以使用 React.createContext() 創建一個上下文 (Context): const { Provider, Consumer } = React.createContext() 然後,你可以創建一個包裹組件 (wrapper component),並返回一個 Provider 組件,在其中加入所有你希望訪問上下文的組件: class Container extends React.Component { constructor(props) { super(props) this.state = { something: 'hey' } } render() { return ( <Provider value={{ state: this.state }}>{this.props.children}</Provider> ) } } class HelloWorld extends React.Component { render() { return ( <Container> <Button /> </Container> ) } } 我將這個組件命名為 Container,因為它將是一個全局的提供者 (Provider)。你也可以創建更小的上下文 (Context)。...