一、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 将状态数据传递到子组件当中。这样应用当中 的状态数据就能够更方便地交流共享了。(官方文档),官方示例如下:

 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——子组件通过这个属性获得父组件的信息

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

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

八、react-router

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

<BrowserRouter>

<Link>

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

--属性 to

<Route>

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

--属性 path

--属性 component

--exact完全匹配

<Switch>

只渲染命中的第一个路由

<Redirect>

直接渲染路由

--属性 to

04-11 03:39