React 学习
React Native.jpeg
自己的不足
- ES5语法
- ES6语法
- Html标签的遗忘
- Css样式单词的遗忘
- 原生js的深入
JSX 语法
- 函数的使用方式：如果需要解析对象，需要定义一个方法
- {show && greet} 表达式写法
- 数组循环的时候：{/* diff时候，首先比较type，然后是key，所以同级同类型元素，key值必须得 唯一 */}
- {/* 这里的className 就是class，避免和组件里的class冲突所以用className */}
- 模块化，为了解决class样式冲突：src_logo__nxkEw
知识要点 循环时的diff算法，先比较值后比较key，并且key是唯一的
代码示例
// 函数的使用方式：如果需要解析对象，需要定义一个方法
function formaName(obj){
return obj.fisrtName + ' ' + obj.lastName;
}
{formaName(obj)}
// 模块化的使用
import styles from './index.module.css'
组件
组件分为两种class组件和function组件
class组件
class组件通常拥有状态和⽣命周期，继承于Component，实现render⽅方法function组件
函数组件通常⽆无状态，仅关注内容展示，返回渲染结果即可
知识要点
useEffect Hook
- 从React16.8开始引⼊入了了hooks，函数组件(function组件)也能够拥有状态
- 什么是状态？
所谓的状态就是拥有生命周期 和 setState 去存储值，所以function组件的功能定位是渲染显示的功能，复杂的用class组件形式。
setState
两个参数：setState(partialState, callback)
- partialState: object|function
可能是一个函数，也可以是对象。对象用的比较多。 - callback:function state
更新之后被调⽤,所以这个是同步值
代码示例
// 绑定一个合成事件
setCounter = () => {
this.changeValue(1);
}
changeValue = v => {
// 对象写法
this.setState({
counter: this.state.counter + v
}, () => {
// 第二个参数
console.log('counter', this.state.counter);
})
// setState的函数写法
this.setState(state => {
return {
counter: state.counter + v
};
});
}
知识要点
- 为什么使用
setState：
它是异步的，改变值后没有立马去更新更改数据值.- setState在合成事件和生命周期中是
异步的，这里说的异步其实是批量更新，达到了优化性能的目的。setState在setTimeout里和原生事件里是同步的
生命周期
import PropTypes from 'prop-types';
1. static defaultProps = {
msg: 'omg'
}
2. static propsTypes = {
msg: PropTypes.string // .isRequired 可以设置组件值不可以为空
}
3. constructor(props) { super(props) }
4. UNSAFE_componentWillMount // 即将要废弃
5. static getDerivedStateFromProps(props, state) // 代替组件将要挂载
6. render() // 渲染
7. componentDidMount() // 组件挂在完成
===============================================================
8. shouldComponentUpdate(nextProps, nexState) // state更新
9. UNSAFE_componentWillUpdate // 即将要废弃
10. render() // 渲染
11. getSnapshotBeforeUpdate() // 组件将要更新
12. componentDidUpdate() // 组件更新完成
===============================================================
13. UNSAFE_componentWillReciveUpdate // 父级state更新
纠正：ReceiveProps
===============================================================
14. componentWillUnmount() // 组件将要卸载
知识要点
- V17废弃：将要挂载、父组件接受新props就会执行、将要更新 三个生命周期
static getDerivedStateFromProps必须要有返回值or nullshouldComponentUpdate必须return bool , true变更，false不变getSnapshotBeforeUpdate他的返回值可以作为componentDidUpdate的参数值
// 组件更新完成 snapshot 参数可以获取更新值
componentDidUpdate(prevProps, prevState, snapshot) {
console.log('componentDidUpdate', prevProps, prevState, snapshot);
}
组件复合
- 组件复合逻辑叙述：
- 主页 HomePage.js 里引入 Layout组件
- Layout 组件 引入 TopBar头部以及BottomBar底部
- App.js 引入 HomePage 解析渲染(由主页跳转到各个页面)
- props子组件传参
import React, { Component } from 'react';
import Layout from './Layout';
export default class HomePage extends Component {
render() {
return (
// 往父组件传参
// 这里面可以是一个对象
{
{
// 传输JSX
content: (
HomePage - Layout - 具名插槽
),
// 传输文本
text: '我是一个文本',
// 传输事件
btnClick: ()=>{
console.log('btnClick');
}
}
}
)
}
}
- props父组件接收参数
import React, { Component } from 'react';
import TopBar from '../components/TopBar'; // 引入公共头部
import BottomBar from '../components/BottomBar'; // 引入公共底部
export default class Layout extends Component {
// 实现组件加载时修改 title
componentWillMount() {
const { title = '标题' } = this.props;
document.title = title; // 获取标题
}
render() {
// 接收子组件参数并定义 下面用 children. 指向参数
const { children, showTopBar, showBottomBar } = this.props;
return (
{showTopBar && {children.content}
{children.text}
{showBottomBar && 知识点
以上可以封装，也类似Vue的具名插槽。
其实下面的React框架，组件源码就是一些类似Button的封装和使用：
- React 组件框架
Ant Design
Redux
- 基本封装顺序
import { createStore } from 'redux';
1. createStore 创建 Store (创建库)
2. reducer 初始化、修改状态函数 (创建规则)
3. getState 获取状态值 (获取值)
4. dispatch 提交更新 (调度)
5. subscribe 变更订阅 (更新值)
- this.forceUpdate
forceUpdate()当你知道一些很深的组件state已经改变了的时候，可以在该组件上面调用，而不是使用this.setState()
大白话诠释：
forceUpdate() 怎么理解？
forceUpdate就是重新render。有些变量不在state上，但是你又想达到这个变量更新的时候，刷新render；或者state里的某个变量层次太深，更新的时候没有自动触发render。这些时候都可以手动调用forceUpdate自动触发render。所以建议使用immutable来操作state，redux等flux架构来管理state
immutable
Flux架构的工作原理
React-Redux
- API
-
Provider 为后代组件提供store (解决了每个页面都引入store的麻烦)
- 工作原理是 上下文
- 代码示例：
import store from './store/'; // 全局拿到引入store import { Provider } from 'react-redux'; ReactDOM.render( // 这里把store传递到子组件 , document.getElementById('root') ); -
connect 为组件提供数据和变更方法 (通过该方法获取数据)
- 高阶组件用法
- 代码示例：
<组件页面>
import React, { Component } from 'react';
import { connect } from 'react-redux'; // 引入 connect 方法
export default connect(
// connect 要做的两件事情：
// 1. mapStateToProps (把数据state映射到props上)
state => ({ num: state}),
// 2. mapDispatchToProps (把调度提交dispatch映射到props上)
// 自己会默认在 this.props 里带 dispatch 方法
{
add: () => ({type: 'Add'}),
minus: () => ({type: 'Minus'})
}
)(
class ReactReduxPage extends Component {
render() {
const { num, dispatch, add, minus } = this.props;
console.log('props', this.props);
return (
ReactReduxPage
{ num }
{/* */}
{/* 第二种写法 在 connect 第二个参数中定义一个方法 */}
)
}
}
)
知识点
- react-redux高阶组件connect方法
- connect 第一个参数是 mapStateToProps (把数据state映射到props上)
- connect 第二个参数是 mapDispatchToProps (把调度提交dispatch映射到props上)，该参数可以封装成一个对象，定义N个方法。
- React.js 的 context
React-Router
- react-router 包含3个库：
-
react-router提供基本的路由 -
react-router-dom实际应用的是这个，并且会包含1.(在浏览器中使用) -
react-router-native在rn中使用
-
- 使用方法
-
Link用来跳转地址 -
Switch独占路由 (设定⼀个没有path的路由，在路由列表最后面，表示一定匹配) -
Route查看当前Localtion，来匹配跳转到哪个组件
@param path 匹配路径 @param component/children/render 渲染方式 @param exact 精确匹配（解决页面都渲染的问题） -
- Route 路由的三种渲染方式 (三者渲染，是互斥的)
-
component组件形式 -
children不管Localtion（地址） 是什么都会显示，优先级最高 -
render优先级最低
-
- 404 页面路由
Switch独占路由
设定⼀个没有path的路由，在路由列表最后面，表示一定匹配
代码示例
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
export default class RouterPage extends Component {
render() {
return (
RouterPage
// Link 用来跳转地址
首页
|
用户中心
// Switch 独占路由
// Route 查看当前Localtion，来匹配跳转到哪个组件
children }
render={() => render }
/>
// 404 not found router
);
}
}
知识点
独占路由、
Route路由的三种渲染方式、它们的优先级。
PureComponent
-
PureComponent优缺点- 可以实现性能的优化 (内置实现
shouldComponentUpdate) - 缺点是必须要用
class形式，⽽且要注意是浅比较
- 可以实现性能的优化 (内置实现
- 和
Component的区别- 两者的区别在于
React.Component并未实现shouldComponentUpdate()，而React.PureComponent中以浅层对⽐prop和state的方式来 实现了该函数 - 此外，
React.PureComponent中的shouldComponentUpdate()将跳过所有⼦组件树的prop更新。因此，请确保所有⼦组件也都是“纯”的组件
- 两者的区别在于
代码示例
import React, { Component, PureComponent } from "react";
export default class PureComponentPage extends PureComponent {
constructor(props) {
super(props)
this.state = {
count: 0,
// obj: { num: 0 } // 浅比较会失效
}
}
setCount=()=>{
this.setState({
count: 100,
// obj: { num: 1000 } // 浅比较会失效
})
}
// 当 extends 是 Component 时该方法 优化函数只执行一次渲染
// shouldComponentUpdate(nexProps, nexState) {
// console.log('nexState', nexState.count);
// console.log('this.state', this.state.count);
// return nexState.count !== this.state.count;
// }
render() {
console.log('查看render执行了多少次');
const { count } = this.state;
return (
PureComponent
)
}
}
知识点
仅作对象的浅层⽐较。如果对象中包含复杂的数据结构，则有可能因为⽆法检查深层的差别，产生错误的⽐对结果。仅在你的
props和state较为简单时，才使⽤React.PureComponent，或者在深层数据结构发生变化时 调用forceUpdate()来确保组件被正确地更新。你也可以考虑使用immutable对象加速嵌套