正常的 Increment 和 Decrement改变 Display 的 count
import React, { useState } from 'react'
function Display(props) {
return <h1>Counter value : {props.counter}</h1>
}
function Increment(props) {
return <button onClick={() => props.addToCounter(1)}>Increment</button>
}
function Decrement(props) {
return <button onClick={() => props.addToCounter(-1)}>Decrement</button>
}
function Index() {
const [counter, setCounter] = useState(0);
const addToCounter = value => setCounter(counter + value);
return (
<div>
<h1>Teste</h1>
<Display counter={counter} />
<Increment addToCounter={addToCounter} />
<Decrement addToCounter={addToCounter} />
</div>
)
}
export default Index
一步一步来改装
使用useContext来替换Display组件中的props
import React, { useState, useContext, createContext } from 'react' const CounterContext = createContext({ counter: 0 }) function Display(props) { const context = useContext(CounterContext) return <h1>Counter value : {context.counter}</h1> }
编写reducer去代替组件中的addToCounter方法
import React, { useState, useContext, createContext, useReducer } from 'react' const CounterContext = createContext({ counter: 0 }) function Display(props) { const context = useContext(CounterContext) return <h1>Counter value : {context.state.counter}</h1> } function Increment(props) { const context = useContext(CounterContext) return <button onClick={() => context.dispatch({ type: 'ADD_TO_COUNTER', value: 1 })}>Increment</button> } function Decrement(props) { const context = useContext(CounterContext) return <button onClick={() => context.dispatch({ type: 'ADD_TO_COUNTER', value: -1 })}>Decrement</button> } function Index() { const [state, dispatch] = useReducer((state, action) => { switch (action.type) { case 'ADD_TO_COUNTER': return { ...state, counter: state.counter + action.value } default: return state } }, { counter: 0 }) return ( <CounterContext.Provider value={{state, dispatch}}> <h1>Teste</h1> <Display /> <Increment /> <Decrement /> </CounterContext.Provider> ) } export default Index
把CounterContext.Provider抽成组件拿出来
function CounterContextProvider(props) { const [state, dispatch] = useReducer((state, action) => { switch (action.type) { case 'ADD_TO_COUNTER': return { ...state, counter: state.counter + action.value } default: return state } }, { counter: 0 }) return ( <CounterContext.Provider value={{ state, dispatch }}> {props.children} </CounterContext.Provider> ) } function Index() { return ( <CounterContextProvider> <h1>Teste</h1> <Display /> <Increment /> <Decrement /> </CounterContextProvider> ) }
把组件分一下文件就是
index.jsx
import React, { useState, useContext, createContext, useReducer } from 'react' import Display from '../components/ComB' import {Increment, Decrement} from '../components/ComA' export const CounterContext = createContext({ counter: 0 }) function CounterContextProvider(props) { const [state, dispatch] = useReducer((state, action) => { switch (action.type) { case 'ADD_TO_COUNTER': return { ...state, counter: state.counter + action.value } default: return state } }, { counter: 0 }) return ( <CounterContext.Provider value={{ state, dispatch }}> {props.children} </CounterContext.Provider> ) } function Index(props) { return ( <CounterContextProvider> <h1>Teste</h1> <Display /> <Increment /> <Decrement /> </CounterContextProvider> ) } export default Index
comA.jsx
import React, { useContext } from "react" import { CounterContext } from '../pages/index.tsx' export function Increment(props) { const context = useContext(CounterContext) return <button onClick={() => context.dispatch({ type: 'ADD_TO_COUNTER', value: 1 })}>Increment</button> } export function Decrement(props) { const context = useContext(CounterContext) return <button onClick={() => context.dispatch({ type: 'ADD_TO_COUNTER', value: -1 })}>Decrement</button> }
comB.jsx
import React, {useContext} from 'react' import {CounterContext} from '../pages/index' function ComB() { const context = useContext(CounterContext) return <h1>Counter value : {context.state.counter}</h1> } export default ComB
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。