ReactHook EffectHook

副作用操作,使得函数组件能够进行生命周期的操作,可以有多个,类组件中相同的生命周期会进行覆盖
.会在
可以看作是以下生命周期函数的结合:
	componentDidMount，componentDidUpdate 和 componentWillUnmount 
	会在每次组件挂载时、数据改变后、组件卸载前执行

1、引入
	import React, { Component,useEffect } from 'react';

2、使用
	useEffect(()=>{
		操作;
	})
	
3、若要清除副作用(如定时器,取消订阅等)
	useEffect(()=>{
		return ()=>{   必须返回一个函数来执行清除副作用
			清除操作,会在依赖项变更和组件卸载前执行
		}
	})
	
4、指定副作用周期
	useEffect(()=>{
		操作;
	},[依赖项]);  依赖项也可以是对象.属性
	
	(1)指定依赖项后
		会在第一次执行副作用
		当依赖项改变后会执行副作用和清除上一次副作用的操作
		组件卸载后,会执行清除副作用
		
	(2)当为[ ]空数组时
		 会在第一次执行副作用
		 在组件卸载后清除副作用

  5、异步promise的网络请求用法
	  考虑在useEffect使用自执行函数或者封装函数
	  	(async ()=>{...})()
	
  6、和useLayoutEffect区别
  	(1)时机不同：
  		.useLayoutEffect会在所有的 DOM 变更之后同步调用 effect,可以使用它来读取 DOM 布局并触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。
  			.例如，在浏览器执行下一次绘制前，用户可见的 DOM 变更就必须同步执行，这样用户才不会感觉到视觉上的不一致	
  		.useEffect会在浏览器完成布局与绘制之后，传给 useEffect 的函数会延迟调用

代码示例:

import React, { Component,useState,useEffect } from 'react';
import logo from './logo.svg';
import './App.css';


class App extends Component {
  state={
    count:1
  }
  updateCount=()=>{
    this.setState({count:this.state.count+1})
  }
  render() {
    return (
      <div className="App">
        
        <button onClick={this.updateCount}>更新</button>
        
        <Example></Example>

      </div>
    );
  }
}
function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState({data:1,msg:'好后'});
  const [name,setName]=useState('jeff');
  console.log(name);

  useEffect(()=>{
    let timer=setInterval(function(){
      setCount({data:count.data+1});
      document.title=count.data;  
    },1000)

    return ()=>{
      clearInterval(timer);
    }
    
  },[])


  return (
    <div>
      {count.data}
      {name}
     <button onClick={()=>{setCount({data:count.data+1});}}>设置</button>
     <button onClick={()=>{setName((name)=>{return 1})}}>设置</button>
    </div>
  );
}

export default App;