带你深入理解 react 生态（全家桶）

最新推荐文章于 2024-05-09 13:02:08 发布

Charles_Tian

最新推荐文章于 2024-05-09 13:02:08 发布

阅读量3.2k

点赞数 2

分类专栏： react

本文链接：https://blog.csdn.net/Charles_Tian/article/details/103704613

版权

react 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

序言

市场上开发项目的前端主流技术框架是 react ，但说实在的，有很多的前端开发者对 react 的整个生态并不熟悉，停留在能用，能开发，能上线的水平。但这些只是开发者的业务水平，并不代表个人技术水平，而个人水平的高低大致取决于对 react 的整个生态有一个全面的了解（此处所谓的了解并不是知道有这些东西，而是理解了这些东西在整个项目中发挥的作用，甚至在项目中的可拓展性，一旦发现问题，能迅速准确的定位问题并解决）。所以该博客的最大目的就是让大家全面理解 react 生态

react 生态（也称之为全家桶）：React + React-Router + Redux + Axios + Babel + Webpack

下面逐一对各个工具进行一个深入了解

React

1.JSX 语法

一句话概括就是：All in js 。但偶尔也需要注意下它的渲染方式，比如你写的一个函数返回的值是一对标签的话，那么最好在这对标签外层加一对小括号，而且最外层只能存在一对标签，不允许存在同级标签。

2.导入方式

不管是在组件页面或者组件内导入方法、变量、依赖、工具和组件等，都可以使用以下格式

import xxx from '../../xxx/xxx'

3.生命周期

componentWillMount：在渲染前调用，组件出现前就是dom还没有渲染到html文档里面。
componentDidMount：在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
componentWillReceiveProps(object nextProps)：在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate(object nextProps, object nextState)：返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。
componentWillUpdate(object nextProps, object nextState)：在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate(object nextProps, object nextState)：在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount：在组件从 DOM 中移除之前立刻被调用。

4.组件传值方式
①父 -> 子：通过 props 属性传值
②子 -> 父：通过 emit 事件（回调函数）传值（这里的事件函数其实也是从父组件通过 props 属性绑定函数后传给子组件的）

函数传值代码示例：
父组件部分代码：

    render(){
	  const searchFormProps = {
	    form: this.props.form,
	    search: this.search // 该search方法已在父组件里声明
	  };
	  return(
	    <div>
	      <SearchForm {...searchFormProps}></SearchForm>  {/*SearchForm为子组件*/}
	    </div>
	  );
	}

子组件部分代码：

    return (
      <div>
        <Form>
          <Row>
            <Col>
              <Button onClick={this.props.search}>查询
              </Button>
            </Col>
          </Row>
        </Form>
      </div>
    );

SearchForm.propTypes = {
  export: PropTypes.func,
  form: PropTypes.object.isRequired
};

当点击查询的时候，触发的是父组件里的 search 函数，然后通过传参或者在 search 函数里做数据处理，再通过setState方法进行修改父组件内的state值即可

③同级组件间的值传递：A组件通过action事件将值修改，store（也就是reducer）将值更新后，B组件再通过 props 从store取值，详细情况在介绍 redux 的时候说明

5.state

state是当前组件的内部状态，只有在当前视图里面用到的状态，才需要放到state里面去。值得注意的是setState是异步的，原因是react内部需要对setState做优化，不是state变了立刻去更新视图，而是拦截一部分state的改变，等到合适的时机再去更新视图。

6.PropTypes

用于检测组件接收数据的类型，即在多人开发时，当被人使用自己定义的组件时，有可能出现类型传错的情况，而在自己的组件上加上prop-types，可以对父组件传来的props进行检查，假如父组件中想传递的是字符串类型‘3’，而传递了一个数字类型3，如果没有类型检查系统不会给与提示，但是有了类型检查以后，在控制台会给你一个类型传递错误的提示。另外有的时候某个属性值并不是一直都有的（如4中的export），有的时候只有特定场景下才有，那么isRequired属性则可不要

7.mapStateToProps、mapDispatchToProps和connect

这三者的用途总的来说是对 redux 的一个实例解释，我们知道redux = action + store(整个应用的唯一数据源) + reducer ，这相当于是它的工作流程，所以mapDispatchToProps负责 action 部分，mapStateToProps负责 reducer 部分，而connect则负责把action和reducer绑定在对应的组件上，最直观的表现形式如下：

export default connect(mapStateToProps, mapDispatchToProps)(Form.create()(componentName));

8.constructor与super

请阅读文章：https://www.cnblogs.com/itgezhu/p/11199313.html

以上八个部分可表征着每个 react 组件或者页面的基本结构，可拓展的还有表单、获取真实dom节点，具体可查阅
链接： http://www.ruanyifeng.com/blog/2015/03/react.html

React-Router

react 路由的作用是向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步，总的来说有三种使用方式，可供组件跳转。

①：Route组件

import { Router, Route, hashHistory } from 'react-router';

<Router>
  <Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="accounts" component={Accounts}/>
    <Route path="statements" component={Statements}/>
  </Route>
</Router>

②：Link组件

Link 组件用于取代<a>元素，生成一个链接，允许用户点击后跳转到另一个路由。它基本上就是<a>元素的React 版本，可以接收Router的状态。

<div>
  <ul role="nav">
    <li><Link to="/about">About</Link></li>
    <li><Link to="/repos">Repos</Link></li>
  </ul>
</div>

③： JS语法

用户交互之后会利用JS 语句跳转到另外组件，这个时候需要注意的是跳转用法，不同的react 版本它对应的js 语法是不一样的。

react 2.0版本：

import { hashHistory, Route } from "react-router";

function () {
    ... 
    hashHistory.push(path) // path后面可以携带参数
}

react 3.0版本：

import { Route } from "react-router-dom";

function () {
    ...
    this.props.history.push(path); // path后面可以带参数
}

更多关于react-router的学习请访问：http://www.ruanyifeng.com/blog/2016/05/react_router.html

Redux

个人觉得这篇文章写的很是通俗易懂：Redux实现原理解析及应用

全家桶总结

这是对 react 项目的一些基础学习，了解了基础之后，开发项目就会迅捷很多，至少让你不仅明白了很多问题，也知道为什么这么处理的原因。另外其实更深入的学习，更深刻的体会还是得通过实战，那么下面就是实战中可能遇到的一些难以理解的问题或依赖或工具等

store

store-keyMirror：为什么需要 KeyMirror

store-combineReducers：React+Redux之combineReducers方法

store-applyMiddleware：中间件与异步操作

参考文章

【1】前端技术:React详解

【2】掌握react，这一篇就够了

【3】React 组件生命周期

【4】react中使用prop-types检测props数据类型

【5】Redux实现原理解析及应用

Charles_Tian

关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
带你深入理解 react 生态（全家桶）

序言市场上开发项目的前端主流技术框架是react ，但说实在的，有很多的前端开发者对 react 的整个生态并不熟悉，停留在能用，能开发，能上线的水平。但这些只是开发者的业务水平，并不代表个人技术水平，而个人水平的高低大致取决于对 react 的整个生态有一个全面的了解（此处所谓的了解并不是知道有这些东西，而是理解了这些东西在整个项目中发挥的作用，甚至在项目中的可拓展性，一旦发现问题，能迅速...
复制链接

扫一扫