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>)
}
