React生态介绍

justb
791 阅读6分钟

声明式

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件，数据驱动视图。

以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

组件化

创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。

组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。

生命周期

img

基本用法

github.com/ruanyf/reac…

web生态

首先我们使用react开发web端的时候一定会用到两个库：react和react-dom，为什么没有像vue一样只使用一个库呢？

因为React的野心从来不仅限于web端，理论上将调度器整理出的节点应用于不同渲染器，就能实现在不同平台的渲染。

状态管理器

react只是UI层，对于如何管理应用的状态，facebook提出了flux架构，而基于这一架构，react生态陆续出现了redux、reflux、mobx 等一系列状态管理框架。

其中redux、mobx是无疑是最受欢迎的两个。但它们的应用场景则大不相同。
Mobx 适合做一些简单的应用，原型实验，适合小的团队使用。Mobx 的优点是响应状态的变化。

redux适合复杂的应用，大团队，需求变化多。它的优点是响应动作和事件。
redux不仅应用于react，也可以应用于angular，vue等框架，只是redux和react配合使用最为契合。

另外国内蚂蚁金服前端团队基于redux, react-router打造了另一个前端框架——dva。
dva简单来讲是对redux方案的集成与拓展，它突破框架的本身，形成一套略为完整的前端架构，处理了很多包括项目构建，异步处理、统一请求、统一错误处理等一系列诸多问题。

如果你选择redux方案，那么建议直接使用dva。

mobx对比redux：juejin.cn/post/694311…

路由

react的路由解决方案也有几个，其中用的最多，也最为推荐的就是：react-router

教程：reactrouter.com/web/guides/…

CSS的编写方式

  1. 在组件中直接使用style

    import React, { Component } from "react";

    const div1 = { width: "300px", margin: "30px auto", backgroundColor: "#44014C", //驼峰法 };

    class Test extends Component { render() { return (

    123
    <div style={{backgroundColor:"red"}}>
    ); } }

2. 传统的sass/less等预编译语言

import React, { Component } from "react";
import "@/assets/css/index.scss";

class Test extends Component {
  render() {
    return (
        <div className="link-name">123</div>
    );
  }
}

3. 在组件中引入 [name].module.scss文件

import React, { Component } from "react";
import moduleCss from "./test.module.scss";

class Test extends Component { 
  render() {
    return (
       <div className={moduleCss.linkName}>321321</div>
    );
  }
}

4.  Css-in-Js方案: styled-components

import styled from 'styled-components';

// `` 和 () 一样可以作为js里作为函数接受参数的标志，这个做法类似于HOC，包裹一层css到h1上生成新组件Title
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// 在充分使用css全部功能的同时，非常方便的实现动态css， 甚至可以直接调用props！
const Wrapper = styled.section`
  padding: 4em;
  background: ${props => props.bgColor};
`;

const App = () => (
    <Wrapper bgColor='papayawhi'>
      <Title>Hello World, this is my first styled component!</Title>
    </Wrapper>
)

UI库

vue,angular相比，react的UI库无疑是最为丰富的，且十分优秀。目前react的UI库不少，其中最有名的就是国内蚂蚁金服开源的ant design

一些工具

Immutable
immutable-js是facebook推出的完全独立的一个js库，侧重函数式编程中不可变数据结构，使用Immutable可使你的react应用性能上会有很大的提升。_

React Devtools——react_调试工具

react-devtools是facebook推出的一款调试工具。可有助于提高你的react应用开发效率。

TypeScript
TypeScript是微软开源的_JavaScript_ 的一个超集，主要提供了类型系统和对 ES6 的支持。而TypeScript也因此成为了angular的一个制胜关键点。
那react能否使用呢？当然是可以的，JSX 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖，区别于vue的template，react可以完全使用TS的特性。

项目构建

前端构建工具有很多种，比如最为流行的webpack、百度开源的fis3、以及 gulp。而开发react应用，推荐使用强大的webpack做项目构建。官方的create-react-app脚手架就是使用的webpack，结合一些rewired的插件比如：www.npmjs.com/package/rea…

服务器端渲染

与传统web项目直接获取服务器端渲染好的HTML不同，单页应用使用JavaScript在客户端生成HTML来呈现内容，用户需要等待JS解析执行完成才能看到页面，这就使得首屏加载时间变长，影响用户体验。此外当搜索引擎爬取网站HTML文件时，单页应用的HTML没有内容，从而影响搜索排名。为了解决这两个缺陷，业界借鉴传统的服务器端直出HTML方案，提出在服务器端执行前端框架(React/Vue/Angular)代码生成HTML，然后将渲染好的HTML返回给客户端，实现CSR前端框架的服务器端渲染。

react的实现方式主要是利用renderToString API进行渲染，社区当中比较常用的框架就是Next.js

react移动端

react不仅在web端占据主流的位置，同时在移动端表现尤为突出。这里不得不提到RN，也就是_react-native_。

_react-native_是目前最优秀的非原生开发移动框架，一处开发，多端使用。同时具有出色的性能，支持热更新等超强的优势，使得_react-native_顿时站在风口浪尖。

美团的MRN体系就是基于React Native，主要实现了全链路日志和项目的单独打包与部署，和web常说的微前端架构类似，目前美团APP采用的就是这套架构

vue和angular在移动端同样有建树，分别是weex和ionic+cordova。然其综合性价比仍不如_react-native_。

开发RN应用所用的技术栈与web端大致相同，同样需要结合redux,react-router, mobx等周边生态来使用。

另外也有一些适合RN的移动端UI库。比如ant design的mobile版——ant-design-mobile，以及响应式的material-ui。

总结

本文主要介绍了react基本概念用法，实践以及相关生态，旨在能够帮助大家快速的入门和上手react，后续有机会的话会做一些更深入的研究，比如调度流程，fiber架构等等

avatar
文章
阅读
粉丝