Document

組件的基本寫法

class ShoppingCart extends React.component {render(){return (<div>Hello</div>);} }

JS子類的構造函數中， 必須調用super方法

constructor(props) {super(props);this.state = {value: null;} }

state 提升
當我們需要同時獲取多個子組件數據，或者兩個組件需要互相通訊的時候，可以把狀態存入父組件當中。然后父組件再把狀態傳遞到子組件當中。

Hook

useReducer – state management
It is like the useState, it is used to manage the state of the hook.
useReducer is the primitive hook compared to useState.
a. reducer

const array = [1, 2, 3, 4, 5] const reducer = (accumulator, current) => accumulator + current; console.log(array.reduce(reducer))//10 console.log(array.reduce(reducer, 5)) //15

b. useReducer
example1

import React, {useReducer} from 'react'const initalState = 0; const reducer = (state, action) => {switch(action) {case 'increment':return state + 1case 'decrement':return state - 1case 'reset':return initialStatedefault:return state } }function Counter (){const [count, dispatch] = useReducer(reducer, initialState)return (<div><Button onClick = {() => dispatch('increment')}>Increment</Button><Button onClick = {() => dispatch('decrement')}>Decrement</Button><Button onClick = {() => dispatch('reset')}>Reset</Button></div>) } export default Counter

example2:

import React, {useReducer} from 'react' //make state as an object const initalState = {firstCounter: 0 } const reducer = (state, action) => {switch(action.type) {case 'increment':return {firstCounter: state.firstCounter + action.value}case 'decrement':return {firstCounter: state.firstCounter - action.value}case 'reset':return initialStatedefault:return state } }function Counter (){const [count, dispatch] = useReducer(reducer, initialState)return (<div><Button onClick = {() => dispatch({type:'increment', value:1})}>Increment</Button><Button onClick = {() => dispatch({type:'increment', value:5})}>Increment by 5</Button><Button onClick = {() => dispatch({type:'decrement',value:1})}>Decrement</Button><Button onClick = {() => dispatch({type:'decrement',value:5})}>Decrement by 5</Button><Button onClick = {() => dispatch({type:'reset'})}>Reset</Button></div>) } export default Counter

c. useReducer with useContext(share state between components)
在不同的組件里拿到同樣的一個值

export const CountContext = React.createContext() const initialState = 0const reducer = (state, action) => {switch(action) {case 'increment':return state + 1case 'decrement':return state - 1case 'reset':return initialStatedefault:return state } }function App(){const [count, dispatch] = useReducer(reducer, initialState)return (<CountContext.Provider value={countState:count, countDispatch: dispatch}><div>count - {count}<Component A /><Component B /><Component C /></div></CountContext.Provider>) }

在Component里面：

import {CountContext} from "../APP" function ComponentA() {const countContext = useContext(CountContext)<div><Button onClick = {() => countContext.countDispatch('increment')}>Increment</Button><Button onClick = {() => countContext.countDispatch('decrement')}>Decrement</Button><Button onClick = {() => countContext.countDispatch('reset')}>Reset</Button></div> } export defalut ComponentA

d.

總結

以上是生活随笔為你收集整理的React Tutorial (updating)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。