React技术栈梳理

 一、react是什么？

react是一个js框架，可以用它来编写html页面，使用react后我们可以完全抛弃html（只需要一个主index文件），而用纯js来编写页面；

 二、为什么要使用react

和直接用html编写页面相比，使用react有以下几点好处：

1. 便于代码的复用

用html编写页面时，如果多个页面拥有基本相同的模块，那么需要把相关模块在各个html文件中全部复制一遍。而使用react我们只需要把这些模块写成组件，在各个页面中调用这个组件即可；

2. 提高渲染效率

当信息发生改变时，需要重新渲染页面，如果用html编写，我们需要花很多精力考虑架构问题，保证渲染效率；而react把这些问题封装了起来，编写高性能页面会变得特别容易；

3. 容易管理

当网站页面变得复杂时，页面管理将变得非常重要，我们需要花很多精力在页面架构和代码维护上，而react 让这一切变得简单；

三、react不能帮我们做什么

react的目的是让我们更好的管理和复用代码，若自己要编写react组件，那么基本的html标签的应用，css语法都是必须要掌握的；使用react后我们依然需要做以下两点：

1. 亲自编写所有要渲染的页面，虽然不用使用html，但需要用类似的 JSX语法。react只是帮我们提高了复用性；

2. 亲自写所有的css代码，页面呈现效果依然需要自己分析编写；

当然借助很多开源的react组件，可以取代一部分这些工作，不过做出的网站大都比较雷同，缺乏个性；

四、深入理解react究竟做了什么

对前端稍微有点基础的都知道，前端学习有3大块html+css+js，其中我们看到的所有web页面的显示效果只有两个因素决定 ，即html和css；只要页面发生了改变，无论是呈现的数据变了，图表变了，图片变了还是某 个颜色变了，无论这种改变是如何导致的，比如鼠标点击，声音控制或者后台数据改变。那么必然意味着 html或者css发生了改变；简而言之，页面的呈现和html+css有着一一对应的关系；而前端的主要工作，除了 编写各种页面之外，就是使用js语言根据数据来不断地更新html和css，从而使页面发生变化；

1. 原生开发如何更新页面

当js以浏览器作为宿主环境时，浏览器为js提供了DOM作为js操作文档的唯一接口，当不使用任何框架时，要更新页面，我们必须亲自调用DOM提供的API来更改文档，效率极其低下；

2. react如何更新页面

在react中每个组件都有一个state对象，它存储了当前组件需要的所有可能发生变化的数据，渲染的html页面和state中的数据是一种一一对应的关系。只要我们通过setState方法改变了state中的数据，那么html也 就跟着变化了，无需我们亲自动手修改dom；在使用react时，只要我们根据state构建了组件，接下来只需要 考虑如何更新state即可。react为更新dom提供了非常高效的算法，这里不深入展开去讲了；

五、react的基本用法

react组件的编写需要两类信息，变化的和不变的。在组件编写时要花精力去分析哪些属性在组件的生命周期 中是有可能发生变化的，哪些是不变的。不变的部分我们就可以写死在html中，针对变化的部分其信息来源 有两种 ，即组件的状态和父组件的状态；

1. 组件的状态

在编写组件时，要为组件编写一个state属性，存储了当前组件需要的数据；当需要改变状态时，调用当前组件的this.setState（）方法即可，浏览器会自动重新渲染当前组件，下面是官方demo的一个例子：

class Square extends React.Component {
    constructor() {
        super();
        this.state = {
            value: null,
        };
    }

    render() {
        return (
            <button className="square" onClick={() => this.setState({value: 'X'})}>
            　　{this.state.value}
            </button>
        );
    }
}    

 

2. 父组件的状态

当你遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。这样应用当中 的状态数据就能够更方便地交流共享了。（官方文档），官方示例如下：

//父组件
renderSquare(i) {
    return (
    <Square
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}
    />
    );
}

//子组件
class Square extends React.Component {
    render() {
        return (
        <button className="square" onClick={() =>this.props.onClick()}>
            {this.props.value}
        </button>
        );
    }
}                

 

小结：

state——组件的状态属性

setState——重新设置组件的状态（这里注意，需要设置一个新的对象而不是在原有组件对象上做修改，至于原因，官方文档上说的很清楚）

props——子组件通过这个属性获得父组件的信息

六、redux

1. 为什么要使用redux

redux是一个用来管理前端数据的一个架构，只有在应用程序非常复杂，数据来源复杂，交互频繁的情况下， 应用redux才有明显的好处；比如，某个应用有上百个组件，并且组件之间信息交互频繁，如果不使用redux ，那么数据将会分散在上百个组件当中，并且当多个组件需要同一个数据时，同样的数据在每个组件中将有 一个副本，当数据改变时，维护起来会相当麻烦。这种情况下就需要考虑引入redux；

2. redux设计的三大原则

（1） 单一数据源

使用redux的程序，所有的state都存储在一个单一的数据源store内部，类似一个巨大的对象树。

（2）state是只读的

state是只读的，能改变state的唯一方式是通过触发action来修改

（3）使用纯函数执行修改

为了描述 action 如何改变 state tree ， 你需要编写 reducers。reducers是一些纯函数，接口是当前state和action。只需要根据action，返回对应的state。而且必须要有返回。

3. 主要API

store=createStare（reducer）——创建store

state=store.getState（）

store.dispatch（action）——触发action，这是改变state的唯一接口

store.subscribe（listener）——一旦State发生变化，就自动执行这个函数，只要把 View 的更新函数（对于 React 项目，就是组件的render方法或setState方法）放入listen，就会实现 View 的自动渲染。

4. reducer的拆分

Redux 提供了一个combineReducers方法，用于 Reducer 的拆分。你只要定义各个子 Reducer 函数，然后用这个方法，就可以将它们合成一个大的 Reducer。

七、react-redux

为了方便使用，Redux 的作者封装了一个 React 专用的库 React-Redux；React-Redux 将所有组件分成两大 类：UI 组件（presentational component）和容器组件（container component），其中UI组件，是“纯组件”，只负责呈现，所有数据通过props获取；容器组件负责数据和逻辑。可以使用装饰器模式把纯组件转化 为容器组价，这里主要用到了三个函数：

1. mapStateToProps（state,ownprops）

建立一个从（外部的）state对象到（UI 组件的）props对象的映射关系。

2. mapStateToProps（dispatch，ownProps）

用来建立store.dispatch方法到props对象的映射。

3.connect

React-Redux 提供connect方法，用于从 UI 组件生成容器组件。它需要mapStateToProps和mapStateToProps作为参数。例如：

const VisibleTodoList = connect(
    mapStateToProps,
    mapDispatchToProps
)（TodoList）

 

<Provider> 组件

当组件嵌套比较深的时候，内层组件要获得state会非常麻烦，需要借助props属性一层一层传递。Proveder组件解决了这个问题，把Provider组件放在最外层，只要在Proveder上传入store，这样所有子组件都可以拿到state了

render（
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
）

八、react-router

一个应用程序往往不只一个页面，在多页面应用程序中我们需要在各个页面之间切换，react-route架构提供了在多个页面和组件之间进行切换的机制；react-router常用组件如下：

<BrowserRouter>

<Link>

为你的应用提供声明式的、可访问的导航链接。

--属性 to

<Route>

最基本的职责是在其 path 属性与某个 location 匹配时呈现一些 UI。

--属性 path

--属性 component

--exact完全匹配

<Switch>

只渲染命中的第一个路由

<Redirect>

直接渲染路由

--属性 to