State Management

上下文 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)。...

如何與組件的狀態互動 設置默認狀態 在組件的構造函數中，初始化this.state。例如，BlogPostExcerpt 組件可能有一個clicked的狀態： class BlogPostExcerpt extends Component { constructor(props) { super(props) this.state = { clicked: false } } render() { return ( <div> <h1>標題</h1> <p>描述</p> </div> ) } } 訪問狀態 可以通過引用this.state.clicked來訪問 clicked 狀態： class BlogPostExcerpt extends Component { constructor(props) { super(props) this.state = { clicked: false } } render() { return ( <div> <h1>標題</h1> <p>描述</p> <p>點擊: {this.state.clicked}</p> </div> ) } } 改變狀態 永遠不要使用以下方式修改狀態： this.state.clicked = true 相反，應始終使用setState()，並將一個對象作為參數傳遞給它： this.setState({ clicked: true }) 該對象可以包含狀態的子集或超集。只有傳遞的屬性才會被修改，忽略的屬性將保持當前狀態。...

通過告訴 React 在點擊某個元素時顯示另一個組件，來切換組件的可見性。 在許多場景中，當點擊按鈕或鏈接時，您希望在屏幕內顯示完全不同的組件。 以導航結構為例，該如何實現呢？ 在這個例子中，我們將狀態集中管理在 App 組件中。 import React, { useState } from 'react'; const AddTripButton = (props) => { return <button onClick={props.addTrip}>Add a trip</button>; }; export default AddTripButton; 然後，在 App 組件中，通過將 addTrip 事件指定為 triggerAddTripState 方法來處理添加旅行的事件： <AddTripButton addTrip={this.triggerAddTripState} /> 使用 React hooks，首先導入 useState： import React, { useState } from 'react'; 然後聲明一個 “state” 變量： const [state, setState] = useState('start'); 在 JSX 中，根據此狀態值顯示和隱藏不同的組件： function App() { const [state, setState] = useState('start'); return ( <div> {state === 'start' && <AddTripButton addTrip={() => setState('add-trip')} />} {state === 'add-trip' && <AnotherComponent />} </div> ); }

在Svelte中处理单个组件的状态非常简单。 但是如何在组件之间传递状态呢？ 使用props传递状态 第一种策略是其他UI框架常见的策略，即使用props传递状态，将状态上升。 当一个组件需要与另一个组件共享数据时，可以将状态上升到组件树中的共同父级。 状态需要通过props传递，直到到达需要此状态信息的所有组件。 这是使用props完成的，我认为这是最好的技术，因为它很简单。 有关props的更多信息，请参考Svelte Props教程。 Context API 有些情况下，props并不是一个实用的方法。也许两个组件在组件树中距离太远，我们必须将状态移动到顶层组件。 在这种情况下，可以使用另一种技术，称为context API，它非常适合让多个组件与后代组件进行通信，而无需传递props。 context API由svelte软件包提供的两个函数提供：getContext和setContext。 您可以设置与键关联的上下文对象： <script> import { setContext } from 'svelte' const someObject = {} setContext('someKey', someObject) </script> 在另一个组件中，您可以使用getContext来检索分配给键的对象： <script> import { getContext } from 'svelte' const someObject = getContext('someKey') </script> 您只能在使用setContext的组件或其子代之一中使用getContext检索键。 如果要让两个位于两个不同组件树中的组件进行通信，那么我们还有另外一个工具：stores。 使用Svelte stores 当组件需要相互通信而无需传递太多props时，Svelte stores是一种非常好的工具来处理应用程序的状态。 首先，您必须从svelte/store中导入可写的writable： import { writable } from 'svelte/store' 然后使用writable()函数创建一个存储变量，将默认值作为第一个参数传递： const username = writable('Guest') 这可以放在一个单独的文件中，您可以将其导入多个组件中，例如称为store.js的文件中（它不是一个组件，因此可以是.js文件而不是.svelte）： import { writable } from 'svelte/store' export const username = writable('Guest') 加载此文件的任何其他组件现在都可以访问存储：...

每個應用程式都需要管理狀態。在React中，我們可以使用hooks，尤其是useState()，並傳遞props來解決許多問題。 當事情變得比較複雜時，我喜歡立即轉向使用狀態管理庫。最近我最喜歡的之一是easy-peasy。 它基於Redux構建，並提供了一種更簡單的方式來與狀態交互。 我喜歡保持我的程式碼盡可能簡單。簡單易懂，簡單美觀。 應該盡量避免複雜性，並將其隱藏在向我們提供簡單接口的庫中。這就是這個庫的情況，也是我喜歡它的原因！ 使用以下命令進行安裝： npm install easy-peasy 首先，我們需要創建一個store（存儲庫）。存儲庫是存儲我們的狀態和修改狀態所需的函數的地方。 在專案的根目錄中的store.js文件中創建存儲庫，內容如下： store.js import { createStore, action } from 'easy-peasy' export default createStore({}) 我們稍後會在這個文件中添加更多東西。 現在，將React應用程序包裝到easy-peasy提供的StoreProvider組件中。這取決於您使用的工具。例如，在create-react-app中，將以下代碼添加到您的index.js文件中： //... import { StoreProvider } from 'easy-peasy' import store from '../store' ReactDOM.render( <React.StrictMode> <StoreProvider store={store}> <App /> </StoreProvider> </React.StrictMode>, document.getElementById('root') ) 這個操作使我們的存儲庫在應用程序的每個組件中都可用。 現在你可以在store.js文件中添加一些狀態和一些用於改變該狀態的操作。 讓我們進行一個簡單的例子。我們可以創建一個name狀態，並創建一個setName操作來改變名字： import { createStore, action } from 'easy-peasy' export default createStore({ name: '', setName: action((state, payload) => { state.name = payload }) }) 現在，您可以在應用程序的任何組件中從easy-peasy導入useStoreState和useStoreActions：...