本文共 4878 字，大约阅读时间需要 16 分钟。
声明：这不是一篇介绍 React 基础知识的文章，需要熟悉 React 相关知识
react react-router state）、跨组件数据储存与共享问题（比如多页面购物车数据存储）。react 本身并不能很好的解决这个问题，需要搭配使用 redux redux 本身只实现了 理念，以及一些基础的功能，但在使用中，还需要扩展一些功能，比如异步派发 action，这时可以选择搭配使用 redux-thunk 来解决异步派发 action 的问题。另外，也是选择 redux-saga，但 redux-saga 不仅仅是异步派发 action，它拥有强大的异步数据流处理功能，几乎改变了整个 redux 的使用方式，是个重量级的家伙，如果是庞大且复杂的项目，推荐使用 redux-saga redux 本身并不与 react 绑定，你依然可以把 redux 与 、 等其他框架一起使用。为了使 redux 与 react 开发时更流畅，可以使用 react-redux 把两者链接起来，这样开发体验更佳action 定义方式等），这时就需要用 dva 来简化数据流操作，降低项目的复杂度umi 一起使用，会有更佳的开发体验。umi 内部使用 ( 封装库)， 具有动态路由、dva model 的自动加载、通过插件支持 PWA(Progressive Web App)、以路由为单元的 code splitting 等总结：
react，如果需要本地路由功能再加 react-router redux + redux-thunk，复杂的页面可以用 redux + redux-saga react + react-router + redux + redux-saga + react-redux + dva + umi 使用 styled-components，可以把 css 样式代码写到 js 文件中。
一般来说，写一个 react 组件，需要如下的结构：
- ComponentA.js- ComponentA.css- ComponentB.js- ComponentB.css- ...
# ComponentA.css.container { padding: 10px;}# ComponentA.jsimport styles from './ComponentA.css';export default props => ( <div className={styles.container}> {props.children} </div>); 使用 styled-components 后，就可以去掉 css 文件：
- ComponentA.js- ComponentB.js- ...
# ComponentA.jsimport styled from 'styled-components';const Container = styled.div` padding: 10px;`;export default props => ( <Container> {props.children} </Container>); 写了大量 react 组件之后（特别是使用 redux + react-redux 之后，组件的 state 已经被剥离出去），感觉使用类声明式（class）写 react 组件其实并非最好的方式，而使用函数式组件会更佳：
state 被滥用类声明式写法：
class Counter extends React.Component { constructor(props) { super(props); this.state = { counter: 0, }; } setCounter(cb) { const { counter } = this.state; setState({ counter: cb(counter), }); } render() { const { counter } = this.state; const setCounter = this.setCounter; return ( <div> Count: {counter} <button onClick={() => setCounter(n => n + 1)}>Increment</button> <button onClick={() => setCounter(n => n - 1)}>Decrement</button> </div> ); }} 函数式写法：
import { withState } from 'recompose'const enhance = withState('counter', 'setCounter', 0)const Counter = enhance(({ counter, setCounter }) => <div> Count: {counter} <button onClick={() => setCounter(n => n + 1)}>Increment</button> <button onClick={() => setCounter(n => n - 1)}>Decrement</button> </div>) 相比较而言，函数式写法要清晰很多呢。
更多参考：
有些时候，我们想要动态的加载一些组件（按需加载），比如在一个单页面应用中：
- pages - PageA.js # a 页面的组件 - PageB.js # b 页面的组件 - PageC.js # c 页面的组件 - ...
只有真正要实例化当前页面的时候，才会去加载相应的组件。使用 react-loadable 封装原来的组件，然后使用封装后的组件，就像使用原来的组件一样，react-loadable 会自动帮我们处理脚本加载。
import Loadable from 'react-loadable';import Loading from './loading-component'; # 页面组件还没有加载成功时，显示一个 loading 组件const LoadableComponent = Loadable({ loader: () => import('./real-component-a'), # 动态加载真正的 A 组件 loading: Loading,});export default class ComponentA extends React.Component { # 封装后的组件，使用方式与原来一致 render() { return <LoadableComponent/>; }} 使用一个现成的 UI 框架，可以少写很多代码。
目前比较推荐的是：
react 服务器端渲染用得最多的是 ，其他可供选择的有 、、。
一般这些框架都会有一些目录结构、书写方式、组件集成、项目构建的要求，自定义属性可能不是很强。
以 为例，整个应用中是没有 html 文件的，所有的响应 html 都是 node 动态渲染的，包括里面的元信息、css, js 路径等。渲染过程中，next.js 会根据路由，将首页所有的组件渲染成 html，余下的页面保留原生组件的格式，在客户端渲染。
更多参考：
开发时主要会用到的工具。
storybook 为组件开发搭建了一个强大的开发环境，并提供了以下的几个功能：
社区已经有很多组件库都在使用 开发，比如：
storybook storybook 更多参考：
这是专门针对 react 组件开发的 chrome 开发者工具插件，就像开发者工具的 Elements 一样，可以查看整个页面的 react 组件树和每个组件的属性和状态，并且可以动态的更改属性和状态，然后会更新 UI 到应用上。
通过 chrome 应用商店安装 .
其他安装方式查看 .
这是专门针对 redux 开发的 chrome 开发者工具插件，就像 一样，可以查看整个页面的 redux store 及其变化，并且可以动态的派发 action，然后会更新 UI 到应用上。
这种安装方式，redux-devtools 会嵌入到页面中，成为页面的一部分。
npm install --save-dev redux-devtools# 还可以安装npm install --save-dev redux-devtools-log-monitornpm install --save-dev redux-devtools-dock-monitor
更多信息参考 .
这种安装方式是成为浏览器开发者工具的一个插件。
通过 chrome 应用商店安装 .
其他安装方式查看 .
一般 react 组件的测试，会用 + ，jest 用来测试 JavaScript， 用来测试 react 组件。
另外，可以使用 代替 react-dom/test-utils，达到更佳的测试体验。
如果你对组件的性能、虚拟 DOM 的算法有极致的追求，可以尝试 react 的替代库，如：
一些很实用的插件库：
redux 的路径选择器redux 与表单绑定react 封装更多博客，查看
作者：
版权声明：自由转载-非商用-非衍生-保持署名（）