Hook and Mobx demo

一、

import React, {useState, useEffect, useCallback} from 'react'
// import { CloseOutlined } from '@ant-design/icons';
export default function HookFour() {
	const [list, setlist] = useState(['a', 'ab', 'abc', 'b', 'cn'])
	const [oldlist] = useState(['a', 'ab', 'abc', 'b', 'cn'])
	const [text, settext] = useState('')
	const del = useCallback(
		() => {
			settext('')
		},
		[],
	)
	// const icon = (
	// 	<CloseOutlined style={{color: '#000'}}/>
	// )
	useEffect(()=>{
		setlist(oldlist.filter(item => item.includes(text)))
	},[text])
	return (
		<div>
			<input
				type='text'
				value={text}
				onChange={(e)=>{
					settext(e.target.value)
				}}
			/>
			<button onClick={del}>clear</button>
			{
				list.map((item, index) => 
					<li key={index} style={{color: '#fff'}}>{item}</li>
				)
			}
		</div>
	)
}

二、

import React, {useState, useReducer, useCallback, useContext} from 'react'
const GloabalContext = React.createContext()
function reducer(state, action) {
	switch(action.type) {
		case 'add':
			return {
				num: state.num + 1
			}
		default:
			return state
	}
}
function ChildOne() {
	const {state, dispatch} = useContext (GloabalContext)
	return <div style={{color: '#fff'}}>ChildOne-{state.num}</div>
}
function ChildTwo() {
	return <div style={{color: '#fff'}}>ChildTwo</div>
}
export default function HookReducer() {
	// const [state, setstate] = useState(0)
	const [state, dispatch] = useReducer(reducer, {
		num: 1
	})
	const addFn = useCallback(
		() => {
			dispatch({
				type: 'add'
			})
		},
		[]
	)
	return (
		<GloabalContext.Provider value={
			{state, dispatch}
		}>
			123
			<span style={{color: '#fff'}}>{state.num}</span>
			<button onClick={addFn}>add</button>
			<ChildOne />
			<ChildTwo />
		</GloabalContext.Provider>
	)
}

三、

import React, { Component } from 'react'
import {observable, autorun} from 'mobx'

const store = observable.box(true)

autorun(() => {
	console.log(store.get(), 'mobx')
})
export default class MobxA extends Component {
	render() {
		return (
			<div>
				
			</div>
		)
	}
}