首先打个广告，系列文章：
古老的React mixins
HOC（高阶组件）
render props
React Hooks
下面进入正题：
关于React Hooks的文章太多了，主要是React Hooks刚推出时太火了，所以我这里仅仅做个搬运工吧，推荐几篇不错的文章好了。
十个案例学会 React Hooks
30分钟精通React Hooks
React Hooks
react hooks进阶与原理
第一篇文章开头总结的很到位：
1.你还在为该使用无状态组件（Function）还是有状态组件（Class）而烦恼吗？
——拥有了hooks，你再也不需要写Class了，你的所有组件都将是Function。
2.你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗？
——拥有了Hooks，生命周期钩子函数可以先丢一边了。
3.你在还在为组件中的this指向而晕头转向吗？
——既然Class都丢掉了，哪里还有this？你的人生第一次不再需要面对this。
这也是推出React Hooks的重要原因吧。
另外推荐阅读：V8 将为 React hooks 改进数组解构的性能

转载于:https://juejin.im/post/5ce53c636fb9a07f035711af

React hooks
React-hooks是React 16.8中的新增功能。它们使您无需编写类即可使用状态和其他React功能。

参考：https://reactjs.org/docs/hooks-intro.html

React Hooks 优势：

简化组件逻辑
复用状态逻辑
无需使用类组件编写

常用 hook：

useState

const [state, setState] = useState(initialState);
useEffect

类组件 componentDidMount、componentDidUpdate 和      componentWillUnmount

需要清除的副作用
useRef

注：UseState useEffect useRef 三个都需要从react中引入。
UseState的使用:
import React,{useState} from 'react'
在函数组件内使用，定义数据
/*
  let[状态的值，修改状态的方法]=useState(状态的初始值)
*/

let [data,setName]=useState({name:'浩克',age:18})
 let [show,setShow]=useState(true)
往子组件传数据
<Child data={data}></Child>
点击改变数据
<button onClick={()=>{
   setName({
      name:'疯狂浩克',
     age:data.age
   })
}}>点击变身</button>

useEffect的使用:
import React,{useState,useEffect} from 'react'
三种事件状态在一块的写法 中括号为触发函数的值
第一次加载会触发挂载和更新，然后改变数据三种状态都会触发(副作用)
// useEffect(()=>{
    //     console.log('挂载 更新')
    //     return()=>{
    //         console.log('卸载')
    //     }
// },[age])
三种事件状态分开写 
挂载阶段 页面初次渲染触发
useEffect(()=>{
        console.log('挂载')
},[])
卸载 点击卸载后触发
useEffect(()=>{
   return()=>{
         console.log('卸载')
        }
},[])
更新 数据发生改变时触发
useEffect(()=>{
      console.log('更新')
},[age])

useRef的使用:
import React,{useState,useEffect,useRef} from 'react'
在函数内定义
let ageP=useRef()
模板中使用ageP
<h2 ref={ageP}>age:{age}</h2>
挂载中使用ageP
useEffect(()=>{
        console.log(ageP)
 })

Hook 使用规则

只在最顶层使用 Hook
只在 React 函数中调用 Hook

React 函数组件中

React Hook 中 - 我自己定义 hook 时，可以调用别的hook
所有的 hook 必须 以 use

react hooks学习
今天学习了一下react hooks, 写一些自己的学习体会.
简单说react hooks 就是用函数来代替之前的class, 然后用useState和useEffect方法来代替之前的state, setState 和 生命周期函数
state的新写法
例如:
function App() {
	const [count, setCount] = useState(0);
	// 这里count相当于state里的一个状态, setCount相当于setState
	return(
		<div>
			<button onClick={() => {setCount(count + 1)}}>
				增加
			</button>
		</div>
	)
}
// 以上就是最简单的一个hooks

生命周期的新写法
function() {
	const [count, setCount] = useState(0);
	useEffect(() => {
		console.log('相当于componentDidMount与compoenntDidUpdate组合')
	})
	// 如果要实现componentDidUnMount
	useEffect(() => {
		
	})
	return(
		<div>
			<button onClick={() => {setCount(count + 1)}}>
				增加
			</button>
		</div>
	)
}