React

96 阅读1分钟

1. 安装react脚手架

cnpm install -g create-react-app

2.创建

create-react-app 01reactapp

3.函数式组件 传参 渲染

4.事件

5.react事件传多个参数

6.子组件改变父组件值

思路:父组件传递子组件改变自身值的函数A,子组件调用函数A,进而改变父组件的值

7.生命周期

8.列表渲染

数组 map 解决

9.条件渲染

渲染前进行条件判断解决

10.axios

按需引入即可

11.插槽

插槽引入后会在props.children中获取到

12.路由

13.路由注意点

13.1 Link

to可以是对象 可传递参数  search相当于url传递参数,可通过qs进行解构  state相当于请求体传递参数

qs state解构

replace 跳转覆盖上一级的路径

13.2 Route

exact精准路由

动态路由

动态路由解构

14.路由进阶

props.history也可实现路由的前进后退

Switch默认匹配符合的第一个路由,例如图2 只显示 abc1页

Redirect重定向 跳转到该路由之前,进行条件判断 重新改变路由地址

15.Redux

1.安装引入

2.通过仓库(reducer)创建新的store 

3.创建仓库 仓库有两个作用 1.初始化数据 2.通过获取动作改变数据,返回新的state

4.获取数据

5.通过仓库的方法dispath进行修改数据

6.修改完数据后重新渲染(监听数据(state)变化,重新渲染)