React增加的这个hook太好理解,太简洁了,简直感受到了vue的味道,来一段代码记录一下吧:
import ReactDOM from 'react-dom';
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 (
<header className="UseEffect-header">
<h3>UseEffect</h3>
<Child hook={hook} name={name} />
{/**上面的变量和下面方法也是可以直接使用的 */}
<button onClick={() => sethook('我改变了react hook 的值' + new Date().getTime())}>改变hook</button>
</header>
);
};
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 (
<div>
<p>{props.name}</p>
{newhook}
</div>
);
};
ReactDOM.render(
<UseEffect />,
document.getElementById('root')
);