reactHooks简单入门教程

useState的使用

在reactHooks中useState代替了原本的state,
const [age,setAge]=useState(18)
定义 age的初始值为18
通过setAge修改age的值

import React ,{ useState} from 'react'
function example(){
  const [age,setAge]=useState(18)
  return(
		<div>
			<p>我叫aaa,性别{sex}</p>
			<Button onClick={()=>setAge(age+1)}>年龄加</Button>
		</div>
	)
}
export default example

useEffect的使用

在reactHoooks中如果需要使用生命周期，则要用到useEffect,

import React ,{ useState,useEffect} from 'react'
function example(){
     const [age,setAge]=useState(18)
     useEffect(()=>{
		console.log(1111111)
	})
     return(
		<div>
			<p>我叫aaa,性别{sex}</p>
			<Button onClick={()=>setAge(age+1)}>年龄加</Button>
		</div>
	)
}
export default example

这里的useEffect相当于componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合体。

 	useEffect(()=>{
		console.log(1111111)//组件挂载时触发
		return ()=>{
			console.log('aaaaaaaaaaa')//组件销毁时触发
		}
	},[])

useEffect 可以传第二个参数，一个数组（effect 更新依赖）如 [age]， 数组中任意元素的改变会触发组件更新， 如果传一个空数组， 则组件更新不会运行 hooks 函数， 仅仅在 mount 和 unmount 执行相应 hook。

createContext和useContext数组间传参

import React ,{ createContext,useContext} from 'react'
const countContext= createContext();
function Counter(){
	let count = useContext(countContext)
	return(<div>
		<h2>{count}</h2> //count的值显示为0
		</div>)
}
function Component1 (){
	const [cont,setCont]= useState(0)
	return (
			<countContext.Provider value={cont}>
				<Counter/>
			</countContext.Provider>
	)
}
export default Component1

当组件上层最近的 <CountContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给 CountContext provider 的 context value 值。

useReducer

function Counter(){
	const [num,dispatch]= useReducer((state,action)=>{
		switch(action){
			case 'sub':
				return state - 1
			case 'add':
				return state + 1
			default:
				return state
		}
	},0)
	return(<div>
		<p>现在的分数是{num}</p>
		<Button onClick={()=>{dispatch('add')}}>加</Button><Button onClick={()=>{dispatch('sub')}}>减</Button>
		</div>)
}