React Hooks

React Hooks

• 什么是Hooks ：
  个人理解：有自己的state的函数式组件。无状态函数式组件，在加上state后，就成现在的Hooks
• 什么是函数式组件：
  即HOC高阶组件，可向其中传递组件，经过函数的再次封装得到一个新的组件
• 要求：
  React要求要将hooks写在函数最外层，不能写在if-else等语句中，确保hooks的执行顺序

hooks 中的数据是只读的，一定要通过钩子函数去修改他

四个钩子函数

useState

状态钩子

import React,{useState} from 'react'
function App(){
	//创造一个状态，并赋初始值为0
	//数组第一个值count接受初始值0，相当于this.state
	//数组第二个值setCount是个函数，可以改变状态的值，相当于this.setState
	const [count ,setCount ] = useState(0)
	const addCount = ()=>{
		setCount(count+10)
	}
	return (
		<div className = 'App'>
			<div>{count}</div>
			<button onClick = {addCount}>点击加10</button>
		</div>
	)
}

export default App;

useContext

共享状态钩子

import React,{useContext} from 'react'
function App(){
	const AppContext = React.createContext()
	const Achild = ()=>{
		const { name } = useContext(AppContext)
		return (
			<div>这是组件A，name为：{name} </div>
		)	
	}
	return (
		<AppContext.Provide value = {{name:'proger'}}>
			<Achild></Achild>
		</AppContext.Provide>
	)
}

export default App;

共享AppContext.Provide 中的数据

useReducer

action钩子

import React,{useReducer} from 'react'
function App(){
	const reducer = (state , action)=>{
		const actionFn = {
			add:function(){
				return {
					...state,
					count:state.count + 1
				}	
			}
		}
		return actionFn[action.type]()
	}
	//初始化state，并声明reducer
	const [state,dispatch] = useReducer(reducer,{count:0})
	const addCount = ()=>{
		dispatch({type:'add'})
	}
	return (
		<div>
			<div>{state.count}</div>
			<button onClick = {addCount}>点击+1</button>
		</div>
	)
}

export default App;

useEffect

副作用钩子

useEffect 中函数是异步执行的，不影响浏览器视图更新
而原来的componentDidMount 、componentDidUpdate 是同步执行的

import React,{useEffect，setLoading,useState} from 'react'
function App(){
	const [loading,setLoading] = useState(true)
	//相当于componentDidMount ，每次render和初次加载时都会调用
	//传入一个回调函数，第二个参数是个数组，可不加
	//有数组时，那么回调函数会一句数组数据的发生变化而调用
	useEffect(()=>{
		setTimeout(()=>{
			setLoading(false)
		},3000)
	})
	return (
		loading?<div>Loading</div>:<div>Loading Finished</div>
	)
}

export default App;

自定义钩子函数

	//封装自定义钩子 usePerson
	//根据业务需求，将自己组装的钩子函数封装成一个函数，返回对应需要的状态和修改状态的方法即可
	function usePerson(name){
		const [loading,setLoading] = useState(true);
		const [person,setPerson] = useState({})
		useEffect(()=>{
			setLoading(true);
			setTimeout(()=>{
				setLoading(false)
				setPerson({name})
			},3000);	

		//effect 的返回函数 ，可作为卸载的生命周期
		return ()=>{
			console.log('组件被卸载了')
		}
		}，[name])
		return [loading,person]
	}
function AsyncPage({name}){
	const [loading,person] = usePerson(name)
	return (
		loading?<div>loading </div>:<div>{person.name}</div>
	)
}

---