react实战—creat-react-app _实战

炒沙作縻终不饱，缕冰文章费工巧。这篇文章主要讲述react实战—creat-react-app相关的知识，希望能为你提供帮助。
Create React App 是用 React 创建新的单页应用的最佳方式。
单页面应用(single-page application)，是一个应用程序，它可以加载单个 html 页面，以及运行应用程序所需的所有必要资源（例如 javascript 和 CSS）。与页面或后续页面的任何交互，都不再需要往返 server 加载资源，即页面不会重新加载。你可以使用 React 来构建单页应用程序，但不是必须如此。React 还可用于增强现有网站的小部分，使其增加额外交互。用 React 编写的代码，可以与服务器端渲染的标记（例如 php）或其他客户端库和平共处。
参考：https://react.docschina.org/docs/create-a-new-react-app.html#create-react-app
1、路由
参考：https://create-react-app.dev/docs/adding-a-router
https://reacttraining.com/react-router/web/guides/quick-start
2、环境变量
参考：https://create-react-app.dev/docs/adding-custom-environment-variables
示例如下：

.env.development文件 REACT_APP_BASE_API = /v1

3、开发版请求代理
参考：https://create-react-app.dev/docs/proxying-api-requests-in-development
https://segmentfault.com/q/1010000016754248/
如果proxy的值是字符串，可以在package.json里添加proxy字段，例如：

"proxy": "http://localhost:4000"

如果proxy的值是一个json，则需要做如下修改：cnpm i http-proxy-middleware --save-dev；src文件夹根目录下创建 setupProxy.js 文件编辑proxy代码，例如

const proxy = require(\'http-proxy-middleware\'); module.exports = function(app) { app.use([process.env.REACT_APP_BASE_API], proxy({ target: \'http://localhost:5000\', changeOrigin: true })); };

4、react-app-rewired
参考：https://github.com/timarney/react-app-rewired/blob/master/README_zh.md
https://github.com/arackaf/customize-cra
此工具可以在不 \'eject\' 也不创建额外 react-scripts 的情况下修改 create-react-app 内置的 webpack 配置，然后你将拥有 create-react-app 的一切特性，且可以根据你的需要去配置 webpack 的 plugins, loaders 等。
customize-cra提供了一组用于自定义利用react-app-rewired核心功能的Create React App v2配置，可以通过config-overrides.js文件来对webpack配置进行扩展。
4.1）自定义webpack配置如

resolve.alias【创建 
import 
或 
require 
的别名，来确保模块引入变得更简单】

// config-overrides.js const { override, addWebpackAlias } = require(\'customize-cra\'); const path = require(\'path\'); module.exports = override( // 配置路径别名 addWebpackAlias({ pages: path.resolve(__dirname, \'src/pages\'), utils: path.resolve(__dirname, \'src/utils\'), assets: path.resolve(__dirname, \'src/assets\') }) )

4.2）使用 antd-mobile 进行web开发【antd-mobile 是 Ant Design 的移动规范的 React 实现；antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品】
参考：https://mobile.ant.design/docs/react/use-with-create-react-app-cn
安装：npm install antd-mobile --save
按需加载：使用 babel-plugin-import【用于按需加载组件代码和样式的 babel 插件】
按需加载原理参考：https://ant.design/docs/react/getting-started-cn#按需加载

// config-overrides.js const { override, fixBabelImports } = require(\'customize-cra\'); const path = require(\'path\'); module.exports = override( fixBabelImports(\'import\', { libraryName: \'antd-mobile\', style: \'css\' }) )

然后只需从 antd-mobile 引入模块即可，无需单独引入样式，babel-plugin-import 会帮助你加载 JS 和 CSS

其它问题
1）postcss autoprefixer不生效

解决方法：修改package.json的browserslist属性

// 修改前 "browserslist": { "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } // 修改后 "browserslist": { "development": [ "> 1%", "last 2 versions" ] }

2）样式冲突
参考： https://create-react-app.dev/docs/adding-a-css-modules-stylesheet
css模块化文件命名规则为[name].module.css 或 [name].module.scss 或 [name].module.sass，它允许你在不同的文件中使用相同的css类名而不用担心命名冲突【会自动生成唯一的类名，格式为[filename]\\_[classname]\\_\\_[hash]】

import React, { Component } from \'react\'; import styles from \'./style.module.scss\'; class PrdDetail extends Component { render() { return ( < div className={styles["detail-container"]}> < div className={styles.left}> < /div> < /div> ); } }

浏览器渲染：

文章图片

个人感觉使用起来很麻烦

import React, { Component } from \'react\'; import styles from \'./style.module.scss\'; class OrderConfirm extends Component { render() { return ( < div className={`clearfix ${styles[\'order-container\']}`}> < p className={`${styles[\'basic-info-row\']} ${styles[\'sum-info-row\']}`}> 共计 1 件商品，合计总额：< span className={`${styles.amount}`}> & yen; 100< /span> < /p> < /div> ); } } export default OrderConfirm;

style.module.scss

.order-container { color: blue; } .basic-info-row { height: 1.1rem; line-height: 1.1rem; } .sum-info-row { font-size: 0.3rem; .amount { color: lightblue; } }

浏览器渲染结果：

文章图片

3） CSS in JS
参考：http://www.ruanyifeng.com/blog/2017/04/css_in_js.html?utm_source=tuicool& utm_medium=referral
以前，网页开发有一个原则，叫做"关注点分离"。简单说，就是一句话，不要写"行内样式"和"行内脚本"。React 出现以后，这个原则不再适用了。因为，React 是组件结构，强制要求把 HTML、CSS、javaScript 写在一起。随着 React 的走红和组件模式深入人心，这种"关注点混合"的新写法逐渐成为主流。

const style = { \'color\': \'red\', \'fontSize\': \'46px\' }; ReactDOM.render( < h1 style={style}> Hello, world! < /h1> , document.getElementById(\'example\') );

上面代码中，CSS 的font-size属性要写成fontSize，这是 JavaScript 操作 CSS 属性的约定。
4）react的Fragment
React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。

render() { return ( < React.Fragment> < ChildA /> < ChildB /> < ChildC /> < /React.Fragment> ); }

react

JSX，是一个 JavaScript 的语法扩展。

我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。
在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。你应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，对于同一属性不能同时使用这两种符号。
因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。
React 只更新它需要更新的部分：React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。
为了便于阅读，我们会将 JSX 拆分为多行。同时，我们建议将内容包裹在括号中，虽然这样做不是强制要求的，但是这可以避免遇到自动插入分号陷阱。

受控组件

在 HTML 中，表单元素（如

<
input>

、

<
textarea>

和

<
select>

）之类的表单元素通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。对于受控组件来说，每个 state 突变都有一个相关的处理函数。

class Login extends Component { constructor(props) { super(props); this.state = { codeBtnText: \'获取验证码\', phone: \'\' } }phoneChange(e) { this.setState({ phone: e.target.value }) } sendPhoneCode() { console.log(this.state.phone) } render() { return ( < div className="login-box"> < div className="input-row"> < input type="tel" className="phone-input" maxLength="11" placeholder="请输入手机号" value=https://www.songbingjia.com/android/{this.state.phone} onChange={this.phoneChange.bind(this)} /> < /div> < div className="input-row code-row"> < input type="text" className="code-input" maxLength="6" placeholder="请输入短信验证码" value=https://www.songbingjia.com/android/{this.state.phoneCode} /> < input type="button" className="code-btn" value=https://www.songbingjia.com/android/{this.state.codeBtnText} onClick={this.sendPhoneCode.bind(this)} /> < /div> < /div> ); } }

列表& key

参考：https://react.docschina.org/docs/lists-and-keys.html
https://es6.ruanyifeng.com/#docs/class#实例属性的新写法
使用 Javascript 中的 map() 方法来遍历 numbers 数组。【类的实例属性除了定义在constructor()方法里面的this上面，也可以定义在类的最顶层。】

class Index extends Component { state = {navs: []} componentDidMount() { request({ url: \'group/groupContentList/zysrf_index_nav\' }).then(response => { this.setState({navs: response.data}) }) } render() { const imgPrefix = process.env.REACT_APP_IMG_PREFIX return ( < div className="index-container"> < div className="nav-box clearfix"> {this.state.navs.map(nav => ( < div className="nav-item" key={nav.id}> < img src=https://www.songbingjia.com/android/{imgPrefix + nav.img_url} /> < p> {nav.title}< /p> < /div> ))} < /div> < /div> ); } }

key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。通常，我们使用来自数据 id 来作为元素的 key。当元素没有确定 id 的时候，万不得已你可以使用元素索引 index 作为 key。如果列表项目的顺序可能会变化，我们不建议使用索引来用作 key 值，因为这样做会导致性能变差，还可能引起组件状态的问题。如果你选择不指定显式的 key 值，那么 React 将默认使用索引用作为列表项目的 key 值。

组合

参考：https://react.docschina.org/docs/composition-vs-inheritance.html
有些组件无法提前知晓它们子组件的具体内容。在 Sidebar（侧边栏）和 Dialog（对话框）等展现通用容器（box）的组件中特别容易遇到这种情况。我们建议这些组件使用一个特殊的 children prop 来将他们的子组件传递到渲染结果中。

条件渲染

React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。你可以使用变量来储存元素，它可以帮助你有条件地渲染组件的一部分，而其他的渲染部分并不会因此而改变。
JSX 中内联条件渲染的方法：
1）与运算符 & &
通过花括号包裹代码，你可以在 JSX 中嵌入任何表达式。这也包括 JavaScript 中的逻辑与 (& & ) 运算符。它可以很方便地进行元素的条件渲染。

function Mailbox(props) { const unreadMessages = props.unreadMessages; return ( < div> < h1> Hello!< /h1> {unreadMessages.length > 0 & & < h2> You have {unreadMessages.length} unread messages. < /h2> } < /div> ); }const messages = [\'React\', \'Re: React\', \'Re:Re: React\']; ReactDOM.render( < Mailbox unreadMessages={messages} /> , document.getElementById(\'root\') );

在 JavaScript 中，

true &
&
 expression

总是会返回 expression, 而

false &
&
 expression

总是会返回 false。因此，如果条件是 true，

&
&

右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。
2）三目运算符
另一种内联条件渲染的方法是使用 JavaScript 中的三目运算符 condition ? true : false。

render() { const isLoggedIn = this.state.isLoggedIn; return ( < div> The user is < b> {isLoggedIn ? \'currently\' : \'not\'}< /b> logged in. < /div> ); }

组件 & Props & State

// 函数组件 function Welcome(props) { return < h1> Hello, {props.name}< /h1> ; } // class组件 class Welcome extends React.Component { render() { return < h1> Hello, {this.props.name}< /h1> ; } } // 渲染组件 const element = < Welcome name="Sara" /> ; ReactDOM.render( element, document.getElementById(\'root\') );

Props 的只读性：组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。
应用程序的 UI 是动态的，并会伴随着时间的推移而变化。在不违反props规则的情况下，state 允许 React 组件随用户操作、网络响应或者其他变化而动态更改输出内容。

状态提升

在 React 中，将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。这就是所谓的“状态提升”。在 React 应用中，任何可变数据应当只有一个相对应的唯一“数据源”。通常，state 都是首先添加到需要渲染数据的组件中去。然后，如果其他组件也需要这个 state，那么你可以将它提升至这些组件的最近共同父组件中。你应当依靠自上而下的数据流，而不是尝试在不同组件间同步 state。

基于路由的代码分割

参考：https://zh-hans.reactjs.org/docs/code-splitting.html
打包是个非常棒的技术，但随着你的应用增长，你的代码包也将随之增长。尤其是在整合了体积巨大的第三方库的情况下。你需要关注你代码包中所包含的代码，以避免因体积过大而导致加载时间过长。为了避免搞出大体积的代码包，在前期就思考该问题并对代码包进行分割是个不错的选择。代码分割是由诸如 Webpack，Rollup 和 Browserify（factor-bundle）这类打包器支持的一项技术，能够创建多个包并在运行时动态加载。对你的应用进行代码分割能够帮助你“懒加载”当前用户所需要的内容，能够显著地提高你的应用性能。尽管并没有减少应用整体的代码体积，但你可以避免加载用户永远不需要的代码，并在初始加载的时候减少所需加载的代码量。
在你的应用中引入代码分割的最佳方式是通过动态 import() 语法。React.lazy 函数能让你像渲染常规组件一样处理动态引入（的组件），然后应在 Suspense 组件中渲染 lazy 组件，如此使得我们可以使用在等待加载 lazy 组件时做优雅降级（如 loading 指示器等）。

import { BrowserRouter as Router, Route, Switch } from \'react-router-dom\'; import React, { Suspense, lazy } from \'react\'; const Home = lazy(() => import(\'./routes/Home\')); const About = lazy(() => import(\'./routes/About\')); const App = () => ( < Router> < Suspense fallback={< div> Loading...< /div> }> < Switch> < Route exact path="/" component={Home}/> < Route path="/about" component={About}/> < /Switch> < /Suspense> < /Router> );

react-router4+

路由传参

参考：https://reacttraining.com/react-router/web/api/Route/route-props

import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter as Router, Route } from "react-router-dom"; // All route props (match, location and history) are available to User function User(props) { return < h1> Hello {props.match.params.username}!< /h1> ; }ReactDOM.render( < Router> < Route path="/user/:username" component={User} /> < /Router> , node );

路由传参（参数不显示在地址栏）
参考：https://www.jianshu.com/p/6f7b5d37f3bc（验证query传的参数同样不显示在地址栏）
https://reacttraining.com/react-router/web/api/history
https://reacttraining.com/react-router/web/api/withRouter
在 React 中正常来说只有在

<
Route>

包裹的组件中才能在 this.props 属性中找到 history 对象，但有些情况下我们就是希望在一个没被

<
Route>

包裹的组件中用到 history 对象。解决方案：withRouter

import React, { Component } from \'react\'; import { withRouter } from "react-router"; class BuyPop extends Component { goOrderConfirm() { const prdDetail = prdData.product const prdInfo = { id: prdDetail.id, selectedPackage: selectedPackage } // this.props.history.push({pathname: \'/orderConfirm\', state: prdInfo}) this.props.history.push(\'/orderConfirm\', prdInfo) } render() { return ( < div className="buy-pop"> < div className="next-btn orange-btn" onClick={this.goOrderConfirm.bind(this)}> 下一步< /div> < /div> < /div> ) } } BuyPop = withRouter(BuyPop)class PrdDetail extends Component { // ... render() { return ( < div className="detail-container"> {this.state.buyPopFlag & & < BuyPop close={this.closeBuyPop.bind(this)} /> } < /div> ); } }

【react实战—creat-react-app】 orderConfirm页面接收参数：this.props.location.state