2018-07-31 汉得日记_创建视图以响应状态的变化-优快云博客

本文介绍了React-router4的基础使用及优化技巧，包括渲染列表数据、组件划分等，并深入探讨了MobX的状态管理方法，对比了MobX与Redux的不同。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React-router4的学习

今天进行了React-router的测试，在规定时间内，我没有完成所给的要求。只是提交了一个半成品，需要继续学习来进行完善

1.简介

React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。

2.Histories

React Router 是建立在 history 之上的。简而言之，一个 history 知道如何去监听浏览器地址栏的变化，并解析这个 URL 转化为 location 对象，然后 router 使用它匹配到路由，最后正确地渲染对应的组件。

常用的 history 有三种形式，但是你也可以使用 React Router 实现自定义的 history。

browserHistory
hashHistory
createMemoryHistory

browserHistory

Browser history 是使用 React Router 的应用推荐的 history。它使用浏览器中的 History API 用于处理 URL，创建一个像example.com/some/path这样真实的 URL 。

React的继续学习

参考胡子的reactjs小书

1.渲染列表数据

问题：开始之前要补充一个知识。之前说过 JSX 的表达式插入 {} 里面可以放任何数据，如果我们往 {} 里面放一个存放 JSX 元素的数组会怎么样？

回答：如果你往 {} 放一个数组，React.js 会帮你把数组里面一个个元素罗列并且渲染出来。

代码如下：执行结果是在页面渲染出用分割线分割的数据。此处用的let..of循环中push方法，还可以进行优化。

class App extends Component {
render () {
    const users = [
    { username: 'Jerry', age: 21, gender: 'male' },
    { username: 'Tomy', age: 22, gender: 'male' },
    { username: 'Lily', age: 19, gender: 'female' },
    { username: 'Lucy', age: 20, gender: 'female' }
    ]

    const usersElements = [] // 保存每个用户渲染以后 JSX 的数组
    for (let admin of users) {
    usersElements.push( // 循环每个用户，构建 JSX，push 到数组中
        <div>
        <div>姓名：{admin.username}</div>
        <div>年龄：{admin.age}</div>
        <div>性别：{admin.gender}</div>
        <hr />
        </div>
    )
    }

    return (
    <div>{usersElements}</div>
    )
}
}

优化核心代码；使用数组的map方法，遍历并返回经过函数处理后的数据。

<div>
    {users.map((user) =>
        {
        return (
        <div>
        <div>姓名：{user.username}</div>
        <div>年龄：{user.age}</div>
        <div>性别：{user.gender}</div>
        <hr />
    </div>
    )})
    }
    </div>

采用React的组件化思想，继续优化。考虑把返回值的部分封装成一个组件，这样只要修改组件就能进行复用。

class User extends Component {
render () {
    const { user } = this.props
    return (
    <div>
        <div>姓名：{user.username}</div>
        <div>年龄：{user.age}</div>
        <div>性别：{user.gender}</div>
        <hr />
    </div>
    )


{users.map((user) => <User user={user} />)}

练习题：

现在需要在页面上显示一本书的章节，章节内容存放到一个数组里面：

const lessons = [
{ title: 'Lesson 1: title', description: 'Lesson 1: description' },
{ title: 'Lesson 2: title', description: 'Lesson 2: description' },
{ title: 'Lesson 3: title', description: 'Lesson 3: description' },
{ title: 'Lesson 4: title', description: 'Lesson 4: description' }
...
]

现在需要你构建两个组件。一个组件为 Lesson 组件，渲染特定章节的内容。可以接受一个名为 lesson 的 props，并且把章节以下面的格式显示出来：

<h1>Lesson 1: title</h1>
<p>Lesson 1: description</p>

点击每个章节的时候，需要把章节在列表中的下标和它的标题打印（console.log）出来，例如第一个章节打印： 0- Lesson 1: title，第二个章节打印：1 - Lesson 2: title。

另外一个组件为 LessonsList，接受一个名为 lessons 的 props，它会使用 Lesson 组件把章节列表渲染出来。

分析：

先弄清楚组件之间的关系，和每个组件需要实现什么。在本题中，分为两个组件为Lesson组件和LessonList组件，其中Lesson组件负责返回遍历后的值，而LessonList组件则负责遍历并返回Lesson组件。核心代码如下：

class Lesson extends Component {
handleClick=() =>
{
console.log(`${this.props.num}-${this.props.lesson.title}`)
}
render () {
    const{lesson}=this.props;
    return (
    <div style={{}}>
    <h1 onClick={this.handleClick}>{lesson.title}</h1>
    <p>{lesson.description}</p>
    </div>
    )
}
}
class App extends Component {
render () {
    return (
    <div>
        {lessons.map((les,index) => <Lesson key={index} num={index} lesson={les} />)}
    </div>
    )
}
}

值得注意的是，key值在Props里是取不到的，所以我们需要使用num来取。

2.组件划分

React.js 中一切都是组件，用 React.js 构建的功能其实也就是由各种组件组合而成。所以拿到一个需求以后，我们要做的第一件事情就是理解需求、分析需求、划分这个需求由哪些组件构成。

组件的划分没有特别明确的标准。划分组件的目的性是为了代码可复用性、可维护性。只要某个部分有可能复用到别的地方，你都可以把它抽离出来当成一个组件；或者把某一部分抽离出来对代码的组织和管理会带来帮助，你也可以毫不犹豫地把它抽离出来。

3.数组里map()方法和reduce()方法的区别

由此可见，map()和reduce()的用法都很相似，都是把一个函数作为参数传递进来。

不同的是，map()是把array中的所有元素，都依次作为increase函数的参数传进去，即依次执行
increase(1); increase(2); increase(3); increase(4); increase(5);
每次都得到一个返回值，即2，3，4，5，6，最终把这些返回值作为数组返回给array2。

而reduce()是先把数组的前两个数作为参数传进multiply函数，然后把返回值加上数组的第三个数，再次作为参数传进multiply函数，如此类推，最终得到的就不是数组了，而是一个数。

Mobx的相关学习

状态管理工具

React 和 MobX 是一对强力组合。React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供 React 使用。

React 绑定库:

npm install mobx-react --save

1.定义状态并使其可观察

可以用任何你喜欢的数据结构来存储状态，如对象、数组、类。循环数据结构、引用，都没有关系。只要确保所有会随时间流逝而改变的属性打上 mobx 的标记使它们变得可观察即可。

import {observable} from 'mobx';

var appState = observable({
    timer: 0
});

2. 创建视图以响应状态的变化

我们的 appState 还没有观察到任何的东西。你可以创建视图，当 appState 中相关数据发生改变时视图会自动更新。 MobX 会以一种最小限度的方式来更新视图。事实上这一点可以节省了你大量的样板文件，并且它有着令人匪夷所思的高效。

通常来说，任何函数都可以成为可以观察自身数据的响应式视图。

3. 更改状态

第三件要做的事就是更改状态。也就是你的应用究竟要做什么。不像一些其它框架，MobX 不会命令你如何如何去做。这是最佳实践，但关键要记住一点: MobX 帮助你以一种简单直观的方式来完成工作。

下面的代码每秒都会修改你的数据，而当需要的时候UI会自动更新。无论是在改变状态的控制器函数中，还是在应该更新的视图中，都没有明确的关系定义。使用 observable 来装饰你的状态和视图，这足以让 MobX检测所有关系了。

4.mobx vs redux

1.开发难度低

2.代码量少

3.渲染性能好

5.核心思想

状态变化引起的副作用应当被自动触发。

Aciton->State->Reaction 单项数据流