React学习知识点分享

1.路由(router) V5
后端路由: 根据用户的请求返还不通的内容
前端路由：根据不同的url 去切换组件
2.官网： https://reacttraining.com/react-router/web/guides/quick-start
3.npm install react-router-dom
4.两种模式
1）历史纪录模式 BrowserRouter
2) hash模式 HashRouter
5. this.props.children
可以渲染子组件
<组件>
<子组件 /> //没有 undefined 一个 object 多个Array
</组件>
路由包裹App 通过context 向App的子孙组件去传值
6.用法
1).引入 import {BrowserRouter as router} from ‘react-router-dom’

2).根组件

3).引入 import {Route} from ‘react-router-dom’

4).

    <Switch>
        <Route/>
        <Route/>
        <Route/>
    </Switch>
    Switch标签包裹可以让内部的路由只匹配合适的第一个，这样可以避免重复匹配 

5). yyy
yyy 默认选中有一个类默认的名字叫active
如果部署到nginx服务器上 用BrowserRouter (config /nginx.conf)
location / {
try_files $uri $uri/ /index.html;
}
7.路由切换的组件有三个属性(props)
1) history
2) location
3) match
8. exact 精确匹配
9.Redirect 重定向
10. 404 页面
11.Switch 作用是 多个组件匹配只渲染第一个
12.子路由

1,public目录下的图片
2.sass node-sass sass-loader
3.引入图标
4.监控路由的变化 history.listen
withRouter
作用是让不是路由切换的组件也具有路由切换组件的三个属性(location match history)

监控路由的变化 this.propos.history.listen((location)=>{
//locatin.pathname 会根据路由的变化而变化
})

解决刷新 在constructor里又调用了一次函数 把 this.props.location.pathname传入

1.监控路由参数的变化（路由传参）
Link to="/xxx/实参/实参2"
path /xxx/:参数/:参数2/… 这叫路由的参数
接收参数 this.props.math.params.参数
2.新增特性 hook
useState 在无状态组件里也可以使用状态

let [数据,修改数据的函数]= useState(数据的初始值)
3.编程式导航

this.props.history.push(path)

4. 1）this.props.history.push listen go… 适合做编程式导航和监听路由的变化
   2） match 取路由的参数
   3） location
   location.pathname
   location.search(取查询字符串) ?a=xxx&b=yyy

         location.searc.slice(1) 去问号    
         import qs from 'querystring'
          qs.parse(a=xxx&b=yyy)  {a:xxx,b:yyy}
    location.state  传递多个值
   

1.NavLink activeClassName 可以指定当前路由的类名
2. params 默认值 {} state 默认值是undefined
3. Link NavLink to=“字符串” to={{pathname:xxx}}
4. Route 的 render 属性
<Route path=“xxx” render={(props)=>{return <组件 {…props} />}}
5.拓展 children 无论是否匹配都会渲染 没匹配 match 为空 匹配了match有值
6.权限路由
7.Redirect组件 to属性可以传值

1.redux 状态管理工具 ( flux mobx)
2.yarn add redux
3. 三个原则
1） store是唯一的
2) state 是只读的
3） 通过纯函数reducer 能够对状态进行修改
4. 使用步骤

1. 引入 createStore import {createStore} from ‘redux’;

2. 设置初始数据
   initState ={ key:value}

3. 传给reducer
   reducer(state=initState,action) 纯函数

4. createStore(reducer);

5. 导出 export default store

6. store.getState().state中的变量

5.纯函数
只要是同样的输入，必定得到同样的输出。
a.不得改写参数
b. 不能调用系统 I/O 的API
c. 不能调用Date.now()或者Math.random()等不纯的方法，因为每次会得到不一样的结果
6. store的常用
store.getState()
7.高阶组件（HOC）
1）属性代理
2）反向继承

1.修改数据

1） store.dispatch(动作)
action 是一定含有type的一个对象 ,
2) 动作发给了 reducer 第二个参数 action
action 一定有type ,还可能接收一些其他参数
3) 根据type修改数据
a. 做 state 的复本
b. 修改state的复本对象
c. 返回新的state
2) store
store getState dispatch({type:‘XXX’,key:value…})
3) action对象的type值 千万不要重复

1.context
1) import {createContext} from ‘react’
2) let {Provider,Consumer} =createContext()
3)
4) 在组件里拿到 Consumer

{
(context传过来的值)=>{
return

…

}
}

5) Consumer 只是能在render进行渲染
在方法里拿到context
使用context传来的数据的组件里写一个 contextType的静态属性
static contextType=context;
设置后，
就可以用 this.context拿到context传过来的数据

1.context
2.分模块
var reducer = combineReducers({ 返回的reducer 是总的reducer
模块的名字: 引入的reducer
})

//分模块以后
store.getState().模块的名字.变量

3. react-redux
   1)yarn add react-redux
   2) import {Provider} from ‘react-redux’
   
   
   
   3) 组件里引入 import {connect} from ‘react-redux’
   connect 高阶组件 连接容器组件和ui组件