本文对应的环境：React + ANTD + .NET CORE WEB API + SignalR

• 本文示例部分分为前端和后端两部分

效果图：

前端代码

用到的包和版本如下：

前端组件代码如下：

本文主要讲解了下日常开发 -> 发布到服务器的一般流程，以及 react 项目部署到服务器后，刷新 404 问题的处理方法。

本篇博文基于：

• react 16.8.4
• IIS7

打包react项目

npm run build

已设定组件的 props.children 即为 iphone 容器屏幕显示的内容

样式中已增加 overflow-y 效果（已隐藏y轴）

效果图：

页面结构

• react 官网：https://reactjs.org/
• 此文为公司内部培训用 react 讲义内容，实战部分，用 react 改写原 H5 手机端页面，适合想学习 react，入门 react 的同学阅读，代码请参加 github：https://github.com/KedeIT/kede.mobile

本篇博文基于 React 16.5.2

吐槽：

作为一个后端开发，15 年开始关注大前端发展趋势，于 17 年去线下听了场前端开发会议，那个时候 Vue2.0 刚出没多久，就被那快速构建页面给吸引了。最早重返前端还是大半年前，新项目用vue写了几个功能页面，发现现在写前端是真挺舒服，尤其是对于后端人员来说（排除掉 CSS ），快速入门并上手不是什么问题。

至于为什么最终选择了 react 而非 vue ？是因为当时对 react 和 vue 及 RN 和 weex 做了番调研对比，鉴于 weex 的不给力，及后期 react 和 vue 学习成本差不多，但 react 的社区更为活跃，外加发起者背景，就毅然选择了 react 。（我个人是通一精百的支持者，所以对于 react 的理念（learn once，write anywhere），是很赞成的。而 weex 的理念 (write once，run anywhere) 虽然很吸引人，但时下个人觉得技术并未达到此程度，配置的复杂度及大量的轮子需造，难以满足大型项目的要求。包括目前 JD 推出的 Taro，个人目前持观望态度，等到 react 这块应用到项目之后，再码一波 Taro 实际调研一番）。

接触 React 的时候已经是 React 16.3 ，不禁感慨前端发展至今，越有后端的趋势。前后花了3个多月的时间过了一遍 webpack 4， npm ， react ，在公司内部做了几场培训，发现了其中的一些不协调，但随着版本的迭代，这些不协调也依次在被更正。（看 React 17 的更新内容，原本一些摸棱两可的方法、属性元素命名均会得到改善：）

正文

本篇博文会对 React 16.5.2 中的常用生命周期函数做一些翻译、讲解说明及发表一些个人的理解和看法，如有错误、歧义之处，还望大家不吝啬指出，互相交流：）

开篇借用官方提供的生命周期函数图：（虽然是 React 16.4 的，但同样适用于 16.5 版本）

React 入门，based on React.16.4.2

• react 官网：https://reactjs.org/
• 此文为公司内部培训用 react 讲义内容，适合想学习 react，入门 react 的同学阅读，代码请参加 github：https://github.com/KedeIT/2018-8.react-demo

本次教程基于环境、使用工具以及版本：

• nodejs：8.11.3
• react：16.4.2
• npm：6.2.0
• SPA（单页应用）
• create-react-app：2.0.0