react-总结7-Hooks

Hooks

有了React Hooks，在函数式组件中，也可以使用类组件的state和组件生命周期。
基础Hooks

1. useState 能使用状态

import React,{ fragment,useState } from 'react'

export default const comp = props => {

	//const [定义状态,定义修改状态的方法] = useState(0)
	const [count,setcount] = useState(0)

	return(
		<Fragment>
			<button onClick = { () => { setCount(count+1) } }>+</button>
			<div>conut:{ count }</div>
		<Fragment/>
	)
}

2. useEffect 能使用生命周期钩子函数

import React,{ fragment,useEffect } from 'react'

export default const comp = props => {

	useEffect(() => {//这个函数相当于compnentDidMount和componentDidUpdate和compoentWillReceiveProps 还可以做数据请求数据修改 还能做dom操作
		console.log('useEffect')
	})

	return(
		<Fragment>
			
		<Fragment/>
	)
}

3. useContext 能使用上下文

在外面单独创建一个文件夹  创建一个上下文的函数
import { createContext } from 'react'

export const moneyContext = createContext（） 
-------------------------------------------------------------
import React,{ fragment,useState } from 'react'
import { moneyContext } from ''//引入上面这个函数
import Father from ''

export default const GFather= props => {
	const [money] = useState(1000)

	return(
		<Fragment>
			<moneyContext.Provider value = { money }
			</moneyContext.Provider>
		</Fragment>
	)
}

import React,{ fragment} from 'react'
import Son from ''

export default const Father= props => {

	return(
		<Fragment>
			<Son/>
		</Fragment>
	)
}

import React,{ fragment,useContext} from 'react'
import { moneyConetext } from '' //引入上面的那个函数

export default const Son= props => {
	const value = useContext (moneyConetext )
	return(
		<Fragment>
			{ value }//就能拿到  GFather组件传递来的值了
		</Fragment>
	)
}

额外的 Hook

1. useReducer 能使用多组件状态共享
2. useCallback 能使用回调函数
3. useMemo 帮我们存储一些值，避免每次重新重复计算高开销的值
4. useRef 能使用ref
5. useImperativeHandle 使用ref时自定义暴露给父组件的实例值
6. useLayoutEffect 使用它来读取DOM布局并同步触发重渲染
7. useDebugValue 可用于React开发者工具中显示自定义hook的标签