什么是react

-React是Facebook开发的一款JS库。
-React一般被用来作为MVC中的V层，它不依赖其他任何的库，因此开发中，可以与任何其他的库集成使用，包括Jquery、Backbone等。
-它可以在浏览器端运行，也可以通过nodejs在服务端渲染。
-React的思想非常独特，性能出众，可以写出重复代码少，逻辑清晰的前端代码。
-React的语法是jsx，通过使用这种语法，可以在react代码中直接混合使用js和html来编写代码，这样代码的逻辑就非常清晰，当然也意味着，需要将jsx代码编译成普通的javascript代码，才能在浏览器中运行，这个过程根据实际项目情况，可以选择多种不同的思路，或者在服务器端通过webpack进行编译。

react生命周期

初始化

1. getDefaultProps：设置默认的props，也可以使用dufaultProps设置组件的默认属性
2. getInitialState：在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor 中定义this.state
3. componentWillMount：组件初始化时调用，以后组件更新不调用，整个生命周期只会调用一个，此时可以修改state
4. render：创建虚拟dom，进行diff算法，更新dom树都在此进行，此时不能修改state
5. componentDidMount：组件渲染之后调用，只能调用一次

更新

1. componentWillReceiveProps(nextProps)：组件初始化时不能调用，组件接收新的props时调用
2. shouldComponentUpdate(nextProps,nextState)：react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以对比前后两个props和state是否相同，如果相同者返回false阻止更新。
3. componentWillUpdata(nextProps,nextState)：组件初始化时候不调用，只有在组件将要更新时才调用，此时可以修改sate。
4. render：组件更新
5. compoentDidUpdate：组件初始化时不调用，组件更新完成之后调用，此时可以获取dom。

卸载

1. componentWillUnMount：组件卸载时调用，一些事件监听和定时器在此时清除。

react的两种写法

- class写法（类式）：通过es6的class语法糖，创建一个实例然后调用render 方法。有现有的生命周期方法。
- hook写法（函数式）：直接通过函数的形式retrun ，可以通过hook api 来实现和class写法一样的生命周期，写法比较简单易读。

react双向数据绑定

react 不像 vue 一样通过Object.defindProperty 或者 proxy 来实现数据的双向绑定。
在react 当中，不允许直接this.state.xx = xx 来改变数据，而是提供了this.setState / useState 来改写数据。

react组件通信

- 子组件通过 props 可以获取到组件传递过来的方法
- 父组件可以在子组件的标签上通过ref 来获取到子组件的方法。如果是hook 的话 子组件需要先在useImperativeHandle 中定义需要暴露出去的方法，并且通过forwardRef包裹子组件。父组件可以通过useRef来获取到子组件的current来调用方法。
- 子组件向父组件传递数据，只需要在父组件内部 定义一个方法，也是通过props传递给子组件，子组件通过调用props 传递的方法。父组件就能获取到子组件传递过来的数据
- Context api：通过Context.Provider 包裹住，内部的所有组件都可以获取到value里面的数据。
- redux

react hook常用的api

- useSate：用来声明状态变量，是异步操作，并非只能接收基础类型的数据，而且也支持函数的接收。
- useEffect：是为react函数组件提供副作用处理的，第一个参数是函数，第二个参数是数组，当第二个参数为空时，useEffect里的函数只会触发一次，当数组里的参数不存在时，每次呈现都会触发函数。如果存在的话，每次变化的时候也会触发函数。 在第一个参数里面retrun 是用来清除副作用的，比如说绑定的事件，定时器的清除。
- useRef：1.获取dom 2.多次渲染之间的纽带，可以拿到最新值。
- useCallback：是useMemo的语法糖，返回的是传入的回调函数。
- useMemo：在检测到依赖项数组中的变量发生变化时，重新执行传入的function，并返回传入函数执行后的结果。配合memo使用，可以避免重复渲染组件。
- memo：如果组件被memo包裹的情况，在传递过来的prop没有变化的时候 ，组件不会更新，避免重复渲染。
- useContext：定义全局变量。先用createContex来创建并初始化，再用provider定义范围，最后使用useContext接收上下文。使用useContext在改变一个数据时，是通过自己逐级查找对比改变的数据然后渲染，而不是通过数据响应式来监控变量的
- useReducer：类似小型的redux,用来管理状态,接收两个参数第一个 action 改变数据的方法，第二个state，数据。

react useCallback和useMemo的区别

useCallback是useMemo的语法糖，区别在于useCallback返回的是传入的回调函数，而useMemo返回的是函数的执行结果

自定义hook

hooks 的使用方式都是 use 开头，那么我们自己定义的也用这个use 开头，作为是一个hook 的标记，统一开发规范。
自定义的hooks 肯定也是一个函数,并且需要和react 给我们的组件一样，需要放到顶层。

使用react hook 自定义store

关键的需要使用到的hook 有：useConext,useRudcer。

//先定义一个store.js
import React from 'react'
// 定义state
export const RootStore = {
	test:1
}
//	定义action
export const RootReducer = (state,action)=>{
	switch(action.type==='xxx'){
		case 'xxx':
			return {
			...state,test:action.data
			}
		default:
			return {
			...state
			}
	}
}
// 定义context
export const RootContext = React.createConext(null)
// 在app.jsx 中引用

import React, {useReducer} from ‘react’

import Clidren from ‘./Clidren’

import {RootReducer,RootStore，RootContext} from ‘./store’

const App = ()=>{

// useReducer 接收两个参数 第一个是action 第二个是初始化数据

const [state,dispath] = useReducer(RootReducer,RootStore)

// 然后用context提供的provider 包裹,把state和dispath传递下去

return <RootContext.provider value={{state,dispath}}>

<Clidren></Clidren>

</RootContext.provider>

export default App
// Clidren 中使用
import react from ‘react’

import 	{RootContext} from ‘./store’

const Clidren = ()=>{

const {state,dispath} = useContext(RootContext)

return <div>

{state.test} // 1

</div>

export default Clidren