React Hooks学习--hook入门：useState，useEffect，useContext和useSelector

Hooks主打使用function component组件，替代class组件
不可以在循环，条件或嵌套函数中使用HOOK

使用hook的目的：

1. 解决 class 中生命周期函数经常包含不相关的逻辑，但又把相关逻辑分离到了几个不同方法中
2. React组件之间复用状态逻辑很难，hook可以在不改变组件内部结构的情况下复用状态逻辑。
3. 在不使用class类组件的情况下，拥有更多的react特性

React怎么知道哪个state对应哪个useState?
因为react靠的是hook的调用顺序，只要hook的调用顺序在多次渲染中保持一致，react就能正确的将内部的state和hook进行关联！！！！！。

一.useState

useState主要用做变量和方法的声明，useState(参数)中的参数表示变量的初始值，参数可以为数字、字符串、对象。
在import导入时，使用useState替代之前由react导入的Component，如下

import React ,{useState} from 'react'
 
function Demo(){
	const [count , setCount] = useState(0);
	return(
		<div>
			<p> you clicked {count} times</p>
			<button onClick = {() => {setCount(count+1)}}>click me</button>
		</div>
	)
}

const [count , setCount] = useState(0)，返回的第一个参数count为定义的state变量，第二个为更改state变量值的函数

二.useEffect

useEffect相当于是componentDidMount,componentDidUpdate,componentWillUnmount三个生命周期函数的组合。是异步执行的，不会阻塞浏览器更新屏幕。

function Demo(){
	useEffect(() => {
		console.log(`你来了`)	
		return () => {
			console.log(`你走了`)
		}
	},[])
}

useEffect中的return后面接的函数相当于生命周期函数中的componentWillUnmount
useEffect函数可以接收两个参数，第二个参数为数组，当数组中变量值发生更改的时候，React会重新执行effect
当数组为[]空数组时，则相当于仅在组件挂载和卸载时执行，即effect仅被执行1次。

三.useContext和createContext

useContext主要用于父子组件之间的传参，相当于class组件中props传参
在使用时，要先导入useContext和createContext

import React,{useState,createContext,useContext} from 'react'
const CountContext = createContext(); //创建上下文组件

function Counter(){ //子组件
	let count = useContext(CountContext)
	return (<h2>{count}</h2>)	
}
	
function Demo(){
	const [count , setCount] = useState(0);
	return(
		<div>
			<p> you clicked {count} times</p>
			<button onClick = {() => {setCount(count+1)}}>click me</button>
			<CountContext.Provider value={count}>
				<Counter/> //子组件
			</CountContext>
		</div>
	)
}

• 先创建上下文组件 createContext()
• 在父组件中，通过上下文组件.Provider将变量传出，标签体为子组件
• 在子组件中，通过useContext(上下文组件)获取传出的变量值

四.useSelector

const num = useSelector(state => state.num)

子组件可以通过useSelector访问state中的num