React 提供 Hook Api
-
useState
- 类型: string | number | boolean | Array | Object
- 描述: useState是一个函数，代表是组件里的一份状态,一个组件可以初始化多份状态。具体用法如下,必须要初始化完之后再用,不用通过改变顺序
import React, {useState} from 'react';
export default (props)=>{
// 返回一个数组,
let [count, setCount] = useState(0);
let [list, setList] = useState([
{title: '华泰'}
]);
let [count, setCount] = useState({
title: '华泰'
});
return(
<div>{count}</div>
<button onClick={()=> setCount(count+1)}>改变值</button>
)
}
-
useEffect(fn, []) 异步执行
-# useLayoutEffect(fn,[]) 同步执行
- 描述: useEffect是一个函数，它类似于class 组件的componentDidMount(),componentDidUpdate(), componentWillUnmount(),生命周期, 如需在对应的生命周期函数中做什么操作可以在此hook中操作。不会阻塞视图渲染，异步执行。
import React, {useState, useEffect} from 'react';
export default (props)=>{
let [count, setCount] = useState(0);
/*
1.如不传第二个参数,每次组件渲染都会执行。
2.如传对应的变量数据,变量更新之后就会调用。
3.如传空数组, 类似componentDidMount
*/
useEffect(()=>{},[count])
useEffect(()=>{
// .... ...
// 最后可以返回一个函数,代表下次组件渲染更新, 可以在里面清楚定时器，解绑事件等操作
return ()=>{
}
},[])
return(
<div>{count}</div>
<button onClick={()=> setCount(count+1)}>改变值</button>
)
}
-
React.Memo(fn)
- 描述: 这个并不算一个hook, 它是用来优化组件渲染的，只会对比porps, 我们知道React组件父组件渲染更新，子组件也会同时渲染，如子组件接收的props 并未更改，子组件其实可以不用更新的。
import React from 'react'
export default React.Memo((props)=>{
return(
<div>
<p>{props.count}</p>
<p>我是一个只接收porps 的视图组件</p>
</div>
)
})
-
useMemo(fn, [])
- 描述: 用法更useEffect类似, 这个hook类似 shouldComponentUpdate 生命周期，优化组件是否渲染，
同步执行。
import React, {useState} from 'react';
export default (props)=>{
let [count, setCount] = useState(0);
let [list, setList] = useState([
{title: '华泰'}
]);
let Childs = useMemo(()=><Child vlaue={list} / >, [list])
return(
<div>
<div>{count}</div>
{Childs}
<button onClick={()=> setCount(count+1)}>改变值</button>
</div>
)
}
-# userContext(Context)
// App.js
import React, {useState, createContext} from 'react'
import Counter from './component/Counter'
let params = {name: "阿里巴巴",age: 10}
export const CountCtx = createContext(params)
export default (props)=>{
let [obj, setAge] = useState(params)
let handleChange = ()=>{
setAge({
...obj,
age: obj.age+2
})
}
return(
<CountCtx.Provider value={obj}>
<Counter/>
<button onClick={ handleChange }>改变数字{obj.age}</button>
</CountCtx.Provider >
)
}
// Counter.js
import React, { useContext } from "react"
import { CountCtx } from "../App"
function Counter() {
const params = useContext(CountCtx)
console.log(params)
return (
<div>{params.name} is {params.age}</div>
)
}
export default Counter
// Child.js
import React, {useContext} from 'react'
import { CountCtx } from "../App"
export default function (props) {
let params = useContext(CountCtx)
return(
<div>
<div>{params.name} is {params.age}</div>
<p>我是Child组件</p>
</div>
)
-
userRef() 获取节点对象。
import React, {useState, useRef , useEffect} from 'react'
export default (props)=>{
let [count, setCount] = useState(0);
// 返回一个对象
let node = useRef()
useEffect(()=>{
console.log(node.current)
},[count])
return(
<button ref={node} id="btn" onClick={ ()=> setCount(count+1) }>{count}</button>
)
}
