React Tutorial (updating)

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)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。