React Hooks浅学使用

React Hooks

最近在写个老项目的时候，引入了hooks开发， 使用感觉非常愉快，同时也踩了一些坑。作为一名小白，单单写的时候我认为hooks带来的优点还是很多的，比如不需要写一堆生命周期了，不用每次this了。而且完全向下兼容很适合老项目中混用😁，本篇仅限于理解使用，不适于理解原理。

1.首先是写法的改变 我们可以渐渐放弃Class

// 原有的写法
class Demo extends React.Component {}
// hooks 写法 简洁!
function Demo() {}

2.useState 其实可以理解为原来的this.setState，白话来说就是用来存值、赋值的。熟悉vue的也可以理解为return里面的data()。初始值只有在第一次渲染才会用到，所以第一次如果你直接data.xxx会报错。每次set操作都会使页面渲染改变

import React, { useState } from 'react';
function Demo() {
	// 声明一个data变量，初始值为null 
	const [data, setData] = useState(null);
	// 取值用data,赋值用setData
}

3.useEffect 可以当做react中周期componentDidMount，componentDidUpdate 和componentWillUnmount 这三个的组合，绝大多数执行操作都可以放里面操作，我们常常在里面调取接口进行赋值。但是useEffect 如果你不去掌控它 ，它会在每次渲染、每次更新都会执行里面所有的代码，非常浪费性能

import React, { useEffect } from 'react';
// 默认情况下每次调用都会执行这个函数
useEffect(()=>{
	console.log('render')
)}

// 只执行一次
useEffect(()=>{
	console.log('render')
),[]}

import React, { useState,useEffect } from 'react';
function Demo() {
	const [data, setData] = useState(null);
	const [list, setList] = useState([]);
	// 仅在变量data发生改变后执行
	useEffect(()=>{
		console.log('render')
	),[data]}	// 增加依赖data
	
	useEffect(()=>{
		console.log('render')
	),[list,data]}	// 增加依赖list
}

看完以上三种不同场景，应该大致明白用法了，useEffect 可以根据依赖变化而执行，可以同时监听多个依赖，也能有多个useEffect

4.useContext（上下文）用于解决react传参的问题，以下是子向父传值的操作。
注意事项：useContext不是响应式的

// 父组件 father.jsx
import React,{ useState,useEffect,createContext } from "react"
import Child from "./child.jsx"
export const DemoContext = createContext();	// 创建上下文
export default function Father() {
	const [name,setName] = useState
	return(
		<div> 
			// 圈定作用域
			<DemoContext.Provider value={{ name, setName }}>
				<Child />
			</DemoContext.Provider>
			<div> {name} </div> {/* name=我是子组件传的值 */}
		</div>
	)
}

// 子组件 child.jsx
import React,{ useState,useEffect,useContext } from "react"
import { DemoContext } from './father.jsx'
export default function Child(){
 	let { name, setNmae } = useContext(DateContext);
	useEffect(()=>{
		const childName ='我是子组件传的值'
		setName(childName)
	),[]}
}