目录
JSX
- 定义
- JSX是React定义的一种类似于xml的js语法,,它允许编写类似于html的代码,然后编译为js代码来执行
- 语法规则
- js表达式用{}包裹
- 元素的class属性改写为className
- 绑定事件onclick改写为onClick
- 只能有一个跟标签
Redux和dva
- Redux工作原理
- 定义数据放入state中,组件可以将state中的数据作为props来引入。当需要更新数据时,向存储区发送一个操作,该操作将被传递到一个reduce中,reduce接收后返回一个新状态,触发组件重新渲染
- Redux核心概念
- action
- store
- reducer
- Redux常用API
- getState -- 获取状态
- dispatch -- 创建action改变状态
- subscribe -- 检测状态变化
- dva
- UIComponent -- 绘制页面
- Model -- 存储和处理数据
- connect -- 链接页面和数据
React-Router
- 工作原理
- 组件
- 路由组件 -- BrowserRouter, HashRouter
- 路由组件配件
- Route -- 用于定义路由规则,匹配路由
- Swtich -- 用于将多个路由组合在一起
- 导航组件 -- Link(链接路由),NavLink(当前路由),Redirect(路由重定向)
React Hooks
- 作用
- Hooks提供如useState, useEffect等内置钩子,使函数式组件也可以用于自己的状态
- 可以将重复的逻辑抽离出去,解决逻辑复用困难的问题
- Hooks有哪些
函数组件和类组件对比
- 类组件有自己的生命周期和状态,函数组件没有,只能通过Props来接收数据
- 类组件使用setState来进行状态更新,函数组件要依赖hooks来进行状态管理
- 类组件需要手动绑定this,函数组件的this是可选的,通常直接使用箭头函数来绑定
- 类组件需要继承,函数组件不需要
setState
- 执行过程
- 当传递一个对象时,setState会将该对象合并到当前状态对象中并触发组件重新渲染啊
- 当传递一个函数时,该函数会接受先前的状态作为参数并返回一个新的状态对象,然后setState将返回的状态对象合并到当前状态中
- setState并不是一调用立马改变state值的,多次调用会合并起来处理
- 同步or异步
- 在React自己的方法,如点击这样的事件中,他是异步的
- 在setTimeout这样的事件中,他是同步的
错误捕获
- componentDidCatch/static getDerivedStateFromError
- window.onError
- react.Profiler
受控组件与非受控组件
- 受控:输入框中的值实时存到state中,类似于vue的双向绑定
- 非受控:在需要使用的时候才通过ref,id,class等方式去获取对应的节点和直
组件通信
- props -- 父子通信
- Ref -- 父子通信
- Context标签 -- 跨级通信
- Redux插件 -- 状态存储通信
- pubsubJS插件 -- 发布订阅通信
生命周期
- 旧版
- 挂载阶段
- 挂载前 -- componentWillMount
- 初始化 -- render
- 挂在后 -- componentDidMount
- 更新
- 使用setState更新
- shouldComponentUpdate -- componentWillUpdate -- render -- ComponentDidUpdate
- 使用forceState强制更新
- componentWillUpdate -- render -- componentDidUpdate
- 使用props更新
- 父render -- 子componentWillReceiveProps -- 子shouldComponentUpdate -- 子componentWillUpdate -- 子render -- 子ComponentDidUpdate
- 卸载
- 卸载前 -- componentWillUnmount
- 卸载 -- ReactDOM.unmountComponentAtNode(document.getElementById())
- 新版(17+)
- componentWillMount, componentWillUpdate,componentWillReceiveProps前加UNSAFE_,即将弃用
- 新增
- getDerivedStateFromProps -- 将props作为状态返回,在render之前调用
- 必须有返回值,返回一个状态对象或null
- getSnapShotBeforeUpdate -- 获取更新前的数据
- 必须有返回值,返回值会传递给componentDidUpdate
- 常用生命周期
- componentDidMount -- 进行一些初始化操作,如开启定时器,请求接口等
- componentWillUnmount -- 进行一些收尾操作,如销毁定时器,事件监听等
- render
三大核心对象
- state
- props
- ref
类组件的this指向
- 我们知道普通函数的this是指向该类的实例对象的,在React中,react的实例对象是React帮我们创建的,所以我们没有办法直接拿到,所以在类组件中会存在this的指向问题
- 解决方法
- 通过bind来改变this指向,在constructor中使用诸如this.handleClick = this.handleClick.bind(this)来修改
- 直接使用箭头函数,因为箭头函数本身没有this