到此，就是React基本的语法，通信，钩子的基本入门就都学完了
React中的状态数据，用useState或useReducer定义，就是Vue中的响应式数据
基本语法就是：
1.JSX文本，这个可以直接作为值传递，
组件结构为
function 组件名(){
const ... // 定义状态
function ... // 定义函数
return (
<>
// 模板部分
</>
)
}
通信：父子通信、兄弟通信（多用父组件传递）、深层通信使用useContext，下一层有上一层对Context状态的继承。
钩子
useState()，
const [state,setState] = useState(初值);
state为只读不可变，只有setState可以修改state
useReducer()
需要先定义一个Reducer(state,action)，里面根据不同情况定义不同action.type，每个type对应相应处理逻辑,对应方式通常配合switch实现。
funciotn Reducer(state,action){
switch(action.type){
case 'situationA':
// A的处理逻辑;
case 'situationB':
// B的处理逻辑;
...
}
}
const [state,dispatch] = useReducer(Reducer,初值,赋初值的函数);
// 当触发某个事件时，就调用state对应的dispatch()，传入对应的type值和相关数据
functoin handleEvent(){
const data = xxx;
dispatch({type:'situationA',data:xxx})
}
return( <button onClick={handleEvent}></button>)
useRef()
1.绑定组件，
// 当一个useRef声明的对象作为插值放到标签中作为属性值时，React会将该标签赋值给这个Ref对象的current属性.
// Ref对象有且仅有一个属性，就是current
import { useRef, useEffect } from 'react';
function FocusInput() {
const inputRef = useRef(null);
useEffect(() => {
// 组件渲染完成后自动聚焦输入框
inputRef.current.focus();
}, []);
return <input ref={inputRef} type="text" />;
}
2.持久化数据
持久化数据，即Ref的current属性所存储的数据不会因为组件的重新渲染而重新变为初值(不会因为组件的重新渲染而重置)。
虽然React中useRef()返回的对象的访问方式
Ref对象.current形似Vue中Ref对象.value，但实则React中的useRef(),不等同与Vue中的ref()，React中的Ref对象中不是响应式的。
抛开Ref对象的访问形式，React中的useRef()更多地应该是与Vue中ref实现
DOM绑定雷同。
useEffect()
useEffect(setup,dependencies)
第二个参数决定在组件重新渲染后第一个参数中的逻辑是否被执行
setup:副作用函数
denpendencise:数组，里面放依赖项（状态名）当依赖项发生变化时，则setup被执行，如果为空数组，则无依赖项，setup旨在最初执行两次(严格模式下的开发环境中，正常生产环境只执行一次)，若不写，则都是依赖项，组件每次重新渲染都会执行setup函数。
import { useState,useEffect } from 'react';
function Component(){
const [stateA,setStateA] = useState("stateA");
const [stateB,setStateB] = useState("stateB");
useEffect(()=>{
console.log("当stateA改变后，这个副作用函数会执行。")
},[stateA]);
function changeStateA(){
setStateA("stateA!!");
}
function changeStateB(){
setStateB("stateB!!");
}
return (
<>
<button onClick={changeStateA}>改变stateA</button>
<button onClick={changeStateB}>改变stateB</button>
</>
)
}
useMemo()
父组件渲染时，仅当相关值有变化时，才再次执行某个值的计算逻辑。
function Son() {
const result = useMemo(()=>{
// 得出result的逻辑
retrun result;
},[相关值])
}
useCallback()
首先需要补充一个知识点，memo的使用
当父组件重新渲染时，如果子组件的props没有改变，则其实不需要重新渲染，为能够实现此优化，于是有了memo()
const 组件名 = memo( // 组件内部JSX )
当父组件重新渲染时， 其实一些函数没必要重新创建，为避免函数的重复创建，实现函数的沿用，于是有了useCallback()。
useCallBack实现的是对组件中某个函数的缓存，当组件重新渲染时仅当依赖项变化时，函数才会重新渲染。
需要缓存的函数可以这样定义
const cachedFn = useCallBack(()=>{// 函数逻辑},[依赖项])
useCallBack和memo配合使用可以让组件在自己接收到的值没有变化，自己的内部的状态数据没有变化时，不会因为父组件的重新渲染而进行没有必要的重新渲染，从而实现性能优化的目的。
比如当一个记忆组件需要接受一个函数作为props，
当父组件重新渲染，这个函数就会重新创建，那么组件的props就变化了，则组件会重新渲染，但实际上，组件中的状态数据并没有变化，组件其实不需要重新渲染，于是我们使用useCallback()保持组件需要的这个函数不变，这样在组件内部状态数据不变的情况下，组件就不会再因为父组件重新渲染而进行不必要的重新渲染，实现了性能优化。
const Son = memo(( {cachedFn} )=>{
// 组件内部JSX逻辑
});
function Father(){
const [stateM,setStateM] = useState("stateM");
const [stateN,setStateN] = useState("stateN");
const cachedFn = useCallback(()=>{
// 被缓存函数的逻辑
},[(//依赖项) N])
function changeStateN(){
setStateN("stateN!!!");
}
return (
<>
<Son cachedFn={cachedFn}>改变状态数据M</button>
<button onClick={changeStateN}>改变状态数据N</button>
</>
)
}
所有的Hook都与组件生命周期相关，不能在循环或条件内调用。
一般来讲，Vue实现的是SSR（服务器渲染），React实现的是CSR（即客户端渲染），所以React更适合用于大型项目的开发。
Vue感觉有点像是React的儿子，嘿嘿。当然Vue也有很多好用的，方便的地方,我也很喜欢呐。
嘿嘿，掘金第一篇文，觉得不错的友友给个赞呗~
