React技术栈梳理

 1、react是什么？

react是一个js框架，能够用它来编写html页面，使用react后咱们能够彻底抛弃html（只须要一个主index文件），而用纯js来编写页面；

 2、为何要使用react

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

1. 便于代码的复用

用html编写页面时，若是多个页面拥有基本相同的模块，那么须要把相关模块在各个html文件中所有复制一遍。而使用react咱们只须要把这些模块写成组件，在各个页面中调用这个组件便可；

2. 提升渲染效率

当信息发生改变时，须要从新渲染页面，若是用html编写，咱们须要花不少精力考虑架构问题，保证渲染效率；而react把这些问题封装了起来，编写高性能页面会变得特别容易；

3. 容易管理

当网站页面变得复杂时，页面管理将变得很是重要，咱们须要花不少精力在页面架构和代码维护上，而react 让这一切变得简单；

3、react不能帮咱们作什么

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

1. 亲自编写全部要渲染的页面，虽然不用使用html，但须要用相似的 JSX语法。react只是帮咱们提升了复用性；

2. 亲自写全部的css代码，页面呈现效果依然须要本身分析编写；

固然借助不少开源的react组件，能够取代一部分这些工做，不过作出的网站大都比较雷同，缺少个性；

4、深刻理解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提供了很是高效的算法，这里不深刻展开去讲了；

5、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 将状态数据传递到子组件当中。这样应用当中 的状态数据就可以更方便地交流共享了。（官方文档），官方示例以下：

 1 //父组件
 2 renderSquare(i) {
 3     return (
 4     <Square
 5         value={this.state.squares[i]}
 6         onClick={() => this.handleClick(i)}
 7     />
 8     );
 9 }
10 
11 //子组件
12 class Square extends React.Component {
13     render() {
14         return (
15         <button className="square" onClick={() =>this.props.onClick()}>
16             {this.props.value}
17         </button>
18         );
19     }
20 }                

 

小结：

state——组件的状态属性

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

props——子组件经过这个属性得到父组件的信息

6、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。

7、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了

1 render（
2 <Provider store={store}>
3 <App />
4 </Provider>,
5 document.getElementById('root')
6 ）

8、react-router

一个应用程序每每不仅一个页面，在多页面应用程序中咱们须要在各个页面之间切换，react-route架构提供了在多个页面和组件之间进行切换的机制；react-router经常使用组件以下：

<BrowserRouter>

<Link>

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

--属性 to

<Route>

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

--属性 path

--属性 component

--exact彻底匹配

<Switch>

只渲染命中的第一个路由

<Redirect>

直接渲染路由

--属性 to