1. class组件/函数组件
class组件
- 生命周期在16.4发生了变更
- 可以用setState更改状态值
- 有三种获取ref的方式,详情见2
函数组件hooks
-
useState
-
useEffect
! -
useRef
-
useContext
在hooks下 如何跨组件传数据
实现步骤:
1.使用creatContext创建context对象
2.在顶层使用provider提供数据
3.在底层组件通过usecontext函数获取数据 -
useCallback
-
useMemo
2. 获取当前ref的方法
函数组件
useRef
写法和creatRef类似
类组件
- 字符串(已废弃)
// 组件ref和dom一样
this.refs['input1'].value
this.refs.input1.value
<input ref='input1'></input>
- 回调函数(使用最多)
组件渲染后,即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>
- 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"/>
路由两种写法/三种方式
- 按钮式写法
- 编程式写法
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写法
- 引入public中的img
- 引入assets中的img
- css中background属性通过url()函数引入路径
React写法
react src 里面引入图片不支持直接写图片的路径,展示不出来
- import模块写法
import imgURL from './../images/photo.png';
<img src={imgURL } />
- require写法
<img src={require('./../images/photo.png')} />
参考: https://blog.csdn.net/weixin_43814775/article/details/118280854