react div 事件优先级_React入门基础篇（下）

▲ 点击上方蓝字关注我 ▲

文/桃知夭夭

微博/@道理不能听太多哦

redux：

1. redux 是 JavaScript应用的状态容器，提供可预测化的状态管理。它保证程序行为⼀致性且易于测试。

redux使用步骤：

1. 需要一个store来存储数据

2. store里的reducer初始化state并定义state修改规则

3. 通过dispatch一个action来提交对数据的修改

4. action提交到reducer函数里，根据传⼊的action的type，返回新的state

react各api作用：

1. createStore 创建store

2. reducer 初始化、修改状态函数

3. getState 获取状态值

4. dispatch 提交更新

5. subscribe 变更订阅

react-redux：

1. react-redux提供了两个api

2. Provider 为后代组件提供store

3. connect 为组件提供数据和变更方法，connect中的参数:state映射和事件映射

react-router：

1. react-router包含3个库，react-router、react-router-dom和react-router-native。

   react-router提供最 基本的路路由功能，实际使⽤用的时候我们不不会直接安装react-router，⽽而是根据应⽤用运⾏行行的环境选择安装 react-router-dom(在浏览器器中使⽤用)或react-router-native(在rn中使⽤用)。

   react-router-dom和 react-router-native都依赖react-router，所以在安装时，react-router也会⾃自动安装

2. react-router中奉⾏一切皆组件的思想，路由器-Router、链接-Link、路由-Route、独占-Switch、重定向-Redirect都以组件形式存在。

import React, { Component } from "react";import { BrowserRouter as Router, Route, Link } from "react-router-dom";export default class RouterPage extends Component { render() { return ( <div> <h3>RouterPageh3> <Router> <Link to="/">⾸首⻚页Link> <Link to="/user">⽤用户中⼼心Link> {/* 根路由要添加exact，实现精确匹配 */} <Route exact path="/" component={HomePage} //children={() => <div>childrendiv>} //render={() => <div>renderdiv>} /> <Route path="/user" component={UserPage} /> Router> div>); }}

Route渲染内容的三种方式：

Route渲染优先级:

children>component>render

这三种方式互斥，你只能⽤一种.

1. children:func不管location是否匹配都会被渲染之外，其它工作方法与render完全一样。

2. render:func当location匹配的时候渲染,接收一个函数。

3. component: component只在当location匹配的时候渲染。

404⻚⾯：

• 设定⼀个没有path的路由在路由列表最后面，表示一定匹配

{/* 添加Switch表示仅匹配一个*/}<Switch> {/* 根路由要添加exact，实现精确匹配 */} <Route exact path="/" component={HomePage} /> <Route path="/user" component={UserPage} /> <Route component={EmptyPage} />Switch>

1. 定制了shouldComponentUpdate后的Component，实现性能优化

2. 缺点是必须要用class形式，⽽且要注意是浅比较

3. React.PureComponent 中的 shouldComponentUpdate() 仅作对象的浅层比较。如果对象中 包含复杂的数据结构，则有可能因为无法检查深层的差别，产生错误的比对结果。

   仅在你的 props 和 state 较为简单时，才使用 React.PureComponent ，或者在深层数据结构发生变化时 调用 forceUpdate() 来确保组件被正确地更新。

   你也可以考虑使用 immutable 对象加速嵌套数据的比较。