从vue到react

1. class组件/函数组件

class组件

1. 生命周期在16.4发生了变更
2. 可以用setState更改状态值
3. 有三种获取ref的方式，详情见2

函数组件hooks

1. useState
   

2. useEffect
   !

3. useRef
   

4. useContext
   在hooks下 如何跨组件传数据
   实现步骤：
   1.使用creatContext创建context对象
   2.在顶层使用provider提供数据
   3.在底层组件通过usecontext函数获取数据

5. useCallback

6. useMemo

2. 获取当前ref的方法

函数组件

useRef
写法和creatRef类似

类组件

1. 字符串（已废弃）

// 组件ref和dom一样
this.refs['input1'].value
this.refs.input1.value
<input ref='input1'></input>

2. 回调函数（使用最多）
   组件渲染后，即componentDidMount后
   组件卸载后，即componentWillMount后，此时，入参为null
   ref改变后

// input1即dom
<input ref={e => this.input1 = e}></input>
// 扩展
// 当前组件更新时，console会执行两次
// 第一次null，第二次才是dom，不影响功能
<input ref={e => {this.input1 = e;console.log(e)}}></input>

3. createRef()（最推荐）

// 容器
// input1.current即dom
input1 = React.createRef();
<input ref={this.input1}></input>

3. router

一个错误解决
关于react-router有三个库web/native/any，any虽然支持范围比较广，但api更复杂，所以在这里还是用web的专用库react-router-dom。
使用react18+react-dom18+react-router-dom6时，用antd总是报错

后面做出以下改动就ok了

关于插槽内容
组件内this.props.children可以获取 < myLink >顶顶顶顶< /myLink > 里的值，相当于vue里的插槽

拓展运算符
当父组件传过来特别多的属性，可以直接用…this.props

antd Link和NavLink
NavLink有个属性activeClassName可以设置点击后的className

Route匹配方式
react-route-dom5默认是前缀匹配，给Route加exact={true}代表精准匹配

Switch包含Route
表示找到第一个匹配的就停止

当没找到对应资源或路由
Webpack会直接返回public里index.html页面，index.html里的资源不要写相对路径，因为路由为多级结构时，刷新页面，资源请求会失败，因为默认把多级结构也当成域名了。

Redirect重定向
代表所有匹配不上时

<Redirect to="/home"/>

路由两种写法/三种方式

1. 按钮式写法
   
2. 编程式写法
   this.$props.history.push(path, state)
   

路由withRoute
react-router-dom5里的withRoute方法让非路由组件拥有props.history

import { NavLink, Route, withRouter } from 'react-router-dom';
export default withRoute(Home); // Home为组件名

HashRouter和BrowserRouter

4. 生命周期

注意：只有类组件才有生命周期
reactV16.3之前

V16.3后

5. Redux

6. 解决变量赋值异步问题

7. img src写法

Vue写法

1. 引入public中的img
   
2. 引入assets中的img
   
3. css中background属性通过url()函数引入路径
   

React写法

react src 里面引入图片不支持直接写图片的路径，展示不出来

1. import模块写法

import imgURL from './../images/photo.png';
<img src={imgURL } />

3. require写法

<img src={require('./../images/photo.png')} />

参考： https://blog.csdn.net/weixin_43814775/article/details/118280854