ReactHook是什么

这篇文章主要为大家展示了“React Hook是什么”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“React Hook是什么”这篇文章吧。

成都创新互联公司是一家专业提供普兰企业网站建设,专注与成都网站制作、成都网站建设、H5场景定制、小程序制作等业务。10年已为普兰众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

react hook有：useState、useEffect、useLayoutEffect、useMemo、useRef、useContext、useReducer、useDebugValue、useImperativeHandle等等。

本教程操作环境：Windows7系统、react17.0.1版、Dell G3电脑。

React Hook是什么？

React官网是这么介绍的： Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

• 完全可选的你无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想，你不必现在就去学习或使用 Hook。

• 100% 向后兼容的Hook 不包含任何破坏性改动。

• 现在可用Hook 已发布于 v16.8.0。

• 没有计划从 React 中移除 class你可以在本页底部的章节读到更多关于 Hook 的渐进策略。

• Hook 不会影响你对 React 概念的理解恰恰相反，Hook 为已知的 React 概念提供了更直接的 API：props， state，context，refs 以及生命周期。稍后我们将看到，Hook 还提供了一种更强大的方式来组合他们。

如果对react还不够了解建议先看下react官方文档，写写demo再来看文章，因为有的react基础的东西我就一笔带过不细说。
react 官方文档 https://zh-hans.reactjs.org/docs/hooks-state.html

React提供的Hook

1.useState

import React from 'react';
import './App.css';
//通常的class写法,改变状态
class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      hook:'react hook 是真的好用啊'
    }
  }
  changehook = () => {
    this.setState({
      hook:'我改变了react hook 的值'
    })
  }
  render () {
    const { hook } = this.state
    return(
         
          {hook}
          
            改变hook
          
        
      )
  }
}
export  {App}

//函数式写法,改变状态
function App() {
//创建了一个叫hook的变量，sethook方法可以改变这个变量,初始值为‘react hook 是真的好用啊’
 const [hook, sethook] = useState("react hook 是真的好用啊");
  return ( 
    
      {hook}{/**这里的变量和方法也是可以直接使用的 */}
       sethook("我改变了react hook 的值")}>
        改变hook
      
    
  );
}
export  {App}

//箭头函数的函数写法,改变状态
export const App = props => {
  const [hook, sethook] = useState("react hook 是真的好用啊");
  return (
    
      {hook}
       sethook("我改变了react hook 的值")}>
        改变hook
      
    
  );
};

使用方法备注在上面的demo中
看完上面useState的对比使用，一个小的demo结构更清晰，代码更简洁，更像写js代码，运用到项目中，那岂不是美滋滋。

2.useEffect & useLayoutEffect

useEffect代替原来的生命周期，componentDidMount，componentDidUpdate 和 componentWillUnmount 的合并版
useEffect( ()=>{ return ()=>{ } } , [ ])

• 第一个参数，是函数，默认第一次渲染和更新时都会触发，默认自带一个return ，return一个函数表示可以再销毁之前可以处理些事情

• 第二个参数，数组，空的时候表示只执行一次，更新时不触发，里面的参数是什么，当参数变化时才会执行useEffect
  useEffect可以多次使用，按照先后顺序执行
  useLayoutEffect强制useeffect的执行为同步，并且先执行useLayoutEffect内部的函数

import React, { useState, useEffect, useLayoutEffect } from 'react';

//箭头函数的写法，改变状态
const UseEffect = (props) => {
	//创建了一个叫hook的变量，sethook方法可以改变这个变量,初始值为‘react hook 是真的好用啊’
	const [ hook, sethook ] = useState('react hook 是真的好用啊');
	const [ name ] = useState('baby张');
	return (
		
			
UseEffect
			
			{/**上面的变量和下面方法也是可以直接使用的 */}
			 sethook('我改变了react hook 的值' + new Date().getTime())}>改变hook
		
	);
};

const Child = (props) => {
	const [ newhook, setnewhook ] = useState(props.hook);
	//这样写可以代替以前的componentDidMount，第二个参数为空数组，表示该useEffect只执行一次
	useEffect(() => {
		console.log('first componentDidMount');
	}, []);

	//第二个参数，数组里是hook,当hook变化时，useEffect会触发，当hook变化时，先销毁再执行第一个函数。
	useEffect(
		() => {
			setnewhook(props.hook + '222222222');
			console.log('useEffect');
			return () => {
				console.log('componentWillUnmount ');
			};
		},
		[ props.hook ]
	);

	//useLayoutEffect 强制useeffect的执行为同步，并且先执行useLayoutEffect内部的函数
	useLayoutEffect(
		() => {
			console.log('useLayoutEffect');
			return () => {
				console.log('useLayoutEffect componentWillUnmount');
			};
		},
		[ props.hook ]
	);

	return (
		

			
{props.name}
			{newhook}
		
	);
};

export default UseEffect;

3.useMemo & useCallback

他们都可以用来优化子组件的渲染问题，或者监听子组件状态变化来处理事件，这一点在以前是很难做到的，因为shouldComponentUpdate 里能监听到是否变化，但没法控制其他的外部方法，只能返回true和false,而componentDidUpdate只能在更新后执行，所以想在渲染之前做些事情就不好搞了。
useCallback目前还不能用

import React, { useState, useMemo } from 'react';

const Child = ({ age, name, children }) => {
    //在不用useMemo做处理的时候，只要父组件状态改变了，子组件都会渲染一次，用了useMemo可以监听某个状态name，当name变化时候执行useMemo里第一个函数
    console.log(age, name, children, '11111111');
	function namechange() {
		console.log(age, name, children, '22222222');
		return name + 'change';
    }
     {/** react 官网虽说useCallback与useMemo的功能差不多，但不知道版本问题还怎么回是，这个方法目前还不能用
    const memoizedCallback = useCallback(
        () => {
            console.log('useCallback')
        },
        [name],
      );
    console.log(memoizedCallback,'memoizedCallback')
     */}
    //useMemo有两个参数，和useEffect一样，第一个参数是函数，第二个参数是个数组，用来监听某个状态不变化
	const changedname = useMemo(() => namechange(), [ name ]);
	return (
		
			
children：{children}
			
name：{name}
			
changed：{changedname}
			
age：{age}