React Tutorial (updating)

Document

1. 组件的基本写法

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

2. JS子类的构造函数中， 必须调用super方法

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

3. state 提升
   当我们需要同时获取多个子组件数据，或者两个组件需要互相通讯的时候，可以把状态存入父组件当中。然后父组件再把状态传递到子组件当中。

Hook

1. 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 + 1
		case 'decrement':
			return state - 1
		case 'reset':
			return initialState
		default:
			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 initialState
		default:
			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 = 0

const reducer = (state, action) => {
	switch(action) {
		case 'increment':
			return state + 1
		case 'decrement':
			return state - 1
		case 'reset':
			return initialState
		default:
			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.