react, react+antd-mobile超全学习笔记

一、准备工作

1. 安装脚手架: cnpm install -g create-react-app
2. 创建项目 create-react-app 项目名

二、React元素渲染

1. 使用jsx写法，创建元素对象
   let div = <div>这样创建一个div对象<div>

注意：jsx对象，最外层必须只有一个根元素（节点）

三、react jsx

优点：

1. JSX执行更快，编译为js代码时进行优化
2. 类型更安全，编译过程出错就不能继续编译，及时发现错误
3. 编写模板更简单快速（不和vue比较）

注意：

1. jsx必须有根节点
2. 正常普通的HTML元素要小写，如果是大写，会被默认为是组件

jsx表达式

1. 由HTML元素构成
2. 中间如果需要插入变量用{}
3. {}中间可以使用表达式，JSX对象
4. 属性和HTML内容一样都是用{}来插入内容

jsx_style样式

1. class中，不可以存在多个class属性
   <div class='abc' class={'active'}></div> 不能这样写！！！！
2. 一个class有多个类名，这样写
   let classStr = ['a', 'b'].join(' ') 以空格分开 <div class={classStr}></div>

四、react组件

函数式组件

类组件：render函数里return对象

符合组件：组件中又有其他组件（类组件和函数组件）

区别：函数式比较简单，一般用于静态没有交互事件内容的组件页面，类组件，一般又称为动态组件，一般会有交互或数据修改的操作

四、react state(相当于vue的data，定义数据的地方)

react是单向数据流，不是数据的双向绑定

写在构造器constructor中，只执行一次

生命周期及修改state的值，在this.setState()方法中修改state对象的属性值

为什么在setState()中修改state的值：因为直接通过this.state修改完数据后，并不会立即修改dom里面的内容，而使用setState()方法设置后，会统一对比虚拟DOM，然后再统一修改，提升性能

点击事件和自定义传值参数

五、props:父组件传递给子组件，单向流动，可以是任意类型（包括父元素的函数）

六、子组件传递数据给父元素

调用父元素的函数，从而操作父元素的数据，进而实现子传父

七、react的事件

特点：

1. 绑定事件命名采用驼峰命名法onClick={this.事件名}
2. react返回的事件对象是通过代理的原生事件对象，如果要查看事件的某个属性直接输出事件对象的属性，否则看到的为Null,比如查看e.target
3. 阻止默认事件 e.preventDefault()

注意：原生：阻止默认事件可以用return false，react中必须使用e.preventDefault()

1. 传参，可以使用箭头函数或者bind
   
   

八、react的渲染

1. 条件渲染 if…else，三元运算
   
2. 列表渲染（需要数组形式）
   

九、react 生命周期

1. componentWillMount:组件渲染前
2. componentDidMount: 组件渲染完成
3. componentWillReceiveProps: 组件将要接受props数据，查看接收props的数据是什么
4. ShouldComponentUpdate: 组件接收到新的state获取props,判断是否更新(是：返回true,反之false)，返回布尔值，用在需要修改state的组件中
5. componentWillUpdate:组件将要更新
6. componentDidUpdate:组件更新完成
7. componentWillUnmount:组件将要销毁

十、表单输入

表单输入，必须绑定value和onChange事件

十一、React插槽

组件中写入内容，这些内容可以被识别和控制，React需要自己开发插槽功能（vue自带插槽）
原理：
组件中写入HTML，可以传入到props里

十二、React路由

根据不同路径，显示不同内容，需要自行安装路由库

npm install react-router-dom --save

1. 引入
   
2. 设置LINK跳转路径
   
3. 设置路由导航
   

ReactRouter三大组件：

1. Router：所有路由组件的根组件，包裹路由规则的最外层容器
   拥有属性：basename="/xxx"，设置根路径，Router可以同时写多个
2. Route：路由规则匹配组件，显示当前规则对应的组件
3. Link：路由跳转的组件
   拥有属性：to，可以传字符串，也可以传对象
   
   

BrowserRouter和HashRouter的区别

link的replace属性：直接退回到根路径（历史访问记录的原地址），不再是上一步

要精确匹配，在Route上设置exact

动态路由地址

通过在组件中的props.match.params.名称 获取动态路由值

重定向组件

如果访问某个组件时，有重定向组件，就会修改页面路径，使其页面内容为重定向的内容

: 只匹配一个路由，只要匹配到了一个，后面的路由将不再匹配

使用Route+render形式渲染组件，在demo中通过props获取参数信息

读取路径上的参数（new URLSearchParams和querystring.parse）

读取结果：

高阶组件WithRouter 当前组件没有直接被路由管理时，使用withRouterb包裹暴露出去，就可以通过props使用到router的对象了

使用js跳转，props.history.push()

十三、Redux

解决React数据管理（状态管理），用于中大型，数据比较庞大，组件之间数据交互较多的情况下使用

1. 解决组件间的数据通信
2. 解决数据和交互较多的应用

安装：

npm install redux --save

1.Store：数据仓库，保存数据的地方

创建store

const reducer = function(state: {
    
    num: 0}, action) {
    
    
	switch (action.type) {
    
    
		case 'add':
			state.num += 1;
			break;
		case 'add':
			state.num -= 1;
			break;
	}
	return {
    
    ...state}  // 先解构再重新赋新值
}
const store = Redux.createStore(reducer)

2.State：一个对象，数据仓库里的所有数据都放在一个state里

3.Action：一个动作，触发数据改变的方法

4.Dispatch：将动作触发成方法

store.dispatch({
    
    type: 'add'})

5.Reducer：一个函数，通过获取动作改变数据，生成一个新的state，从而改变页面内容

const reducer = function(state: {
    
    num: 0}, action) {
    
    
	switch (action.type) {
    
    
		case 'add':
			state.num += 1;
			break;
		case 'add':
			state.num -= 1;
			break;
	}
	return {
    
    ...state}  // 先解构再重新赋新值，相当于对象的copy
}

具体写法：

通过store.getState().数据名获取修改后的数据，store.dispatch(action, {}):可传两个参数，第一个是action对象的type，第二个是要传递的对象参数

总结：

1. 创建仓库

let store = createStore(redux)

1. 获取数据

store.getState()

1. 修改数据（通过动作修改数据）

store.dispatch({
    
    type: 'add', content: {
    
    id: 1, msg: 'xxx'}})

1. 修改视图（监听数据的变化，重新渲染页面内容）

store.subscribe(() => {
    
    
	ReactDOM.render(<组件名 />, document.querySelector('#root'))
})

十四、Redux-redux

安装:

npm install react-redux

1. provider组件：自动将store里的state和我们的跟组件进行关联

2. mapStateToProps：这个函数将store里的state映射到props

3. mapDispatchToProps：这个函数将store里的dispatch映射到props，实现方法的共享

4. connect：将组件和数据（方法）进行连接

使用总结：

1. 创建reducer
2. 实例化数据仓库store
3. 将state，dispatch映射到组件的props中
4. 将数据和组件进行connect关联
5. 通过provider进行页面更新
   
   

十五、react+ant mobile的使用

1. 安装

npm install antd-mobile --save

• 按需加载
  
  使用babel-plugin-import步骤：
• 安装：npm install babel-plugin-import --save-dev
• 将其配置到package的babelrc内，需要先手动将其显示出来，所以先执行命令npm run eject

直接执行npm run eject报错的话，可先执行git init，git add .，git commit -m “”，最后执行npm run eject

• 在package.json中找到babel，加入配置代码，按需加载就完成了！！
  

Ref和Dom

创建获取使用Ref：

通过ref可以修改标签style属性

十六、react中的组件优化

1. 在componentWillUnmount阶段销毁不用的定时器、网络请求、事件监听等，否则路由跳转的时候有可能会报错
   
   
2. shouldComponentUpdate组件渲染优化（需要组件重新渲染就返回true，否则false）
   

3. 创建组件使用pureComponent进行数据浅比较，决定是否需要重新渲染组件

错误边界处理

防止某一组件发生错误时，页面产生白屏情况，设置错误边界处理，则未发生错误的组件正常渲染，发生错误的组件出显示错误原因