java项目移动和pc融合_React的移动端和PC端生态圈的使用汇总

对于一项技术，我们不能停留在五分钟状态，特别喜欢一句话，用什么方式绘制UI界面一点不重要，重要的是底层的思维，解决问题和优化的思路。

由于React的生态极为庞大，本文内容部分来自一些别人的汇总，至于原文只要还是能找到的，我都会贴上地址，谢谢前期贡献的作者，如果有没有被汇总到的，欢迎在下面补充。

生态圈：

React官方推荐超大型项目使用的TypeScript

为什么要把TypeScript放在第一位，因为TypeScript在构建超大型应用时，多人协作可以极大的加快工作效率，特别是前后端交互特别多，业务情况特别复杂的状况下(比如IM)，它的优势就凸显出来了。但是在一些中小型项目中，优势并不是那么的明显。(比如做完项目跑路后期不迭代这种)

TypeScript并不是一个新语言，可以简单的认为 TS= js + Type.它只是一个javascript的超集，目前更新速度也是非常快，

个人建议，在Node.js开发和React native以及大型React中使用TypeScript

在下载官方的react脚手架中，包含了一个第三方的ts创建脚手架的命令

在 Create React App 中使用 TypeScript

Create React App 内置了对 ·TypeScript` 的支持。

需要创建一个使用 TypeScript 的新项目，在终端运行：

npx create-react-app my-app --typescript

interface IState {

collapsed?: boolean,

}

interface IProps {

props?: string | Function

}

constructor(props: IState) {

super(props)

}

flag :number = 123

componentDidMount() {

const result = this.FunctionTest()

}

FunctionTest():Promise{

return Promise.resolve(false)

}

TypeScript写起来代码量会多一些，但是对于参数类型，返回类型，一眼明了，拥有静态类型检查，如果有问题，在编写代码时候就可以知道。

补充一点，现在TS的生态已经足够适应开发，像一般的webpack插件都有了typescript的文件支持，当然，并不是所有的第三包都支持ts.在技术选型的时候就要考虑清楚这点，否则就会多做很多事情。

状态统一集中管理，redux,mbox,redux-sage,dva等开源库

先看看原始的react数据管理

组件间数据的传递，依靠props，状态数据提升等完成，但是对于跨层级的组件间数据传递，就不那么友好了，尤其是大型项目后期的迭代维护

再说说被人吐槽，但是它的单向数据流思想不得不肯定的redux.

Redux

状态及页面逻辑从 里面抽取出来, 成为独立的 store, 页面逻辑就是 reducer

及都是 Pure Component, 通过 connect方法可以很方便地给它俩加一层wrapper从而建立起与 store的联系: 可以通过 dispatch 向 store注入 action, 促使 store的状态进行变化, 同时又订阅了 store 的状态变化, 一旦状态有变, 被 connect的组件也随之刷新

使用 dispatch往 store 发送 action 的这个过程是可以被拦截的, 自然而然地就可以在这里增加各种 Middleware, 实现各种自定义功能,eg: logging

这样一来, 各个部分各司其职, 耦合度更低, 复用度更高, 扩展性更好

在面试的时候，我觉得如果可以手写一个redux库，并且说清楚单向数据流的思维，是一个加分项。