jsx变为js的过程：http://babeljs.io/repl/
youtube: https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg/playlists
raisl365: https://www.rails365.net/movies/you-ren-de-react-shi-pin-jiao-cheng-ji-chu-pian-1-jie-shao
上一节讲了：通过代码的分离来展示client.js文件的进化过程。
关于基础，还需要继续夯实。
先考虑下组件的生命周期
Ref: 基础篇 #14 组件生命周期（完结）, 对应代码：https://github.com/hfpp2012/hello-react
Ref: [React] 02 - Intro: why reac and its design pattern - React 组件生命周期
- Mounting ：已插入真实 DOM 【挂载】
- Updating ：正在被重新渲染 【更新】
- Unmounting：已移出真实 DOM 【卸载】
生命周期的方法：
-
componentWillMount 【挂载前的操作】在渲染前调用,在客户端也在服务端。
-
componentDidMount 【挂载后调用的操作】在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
-
componentWillReceiveProps 【接收prop后调用】在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
-
shouldComponentUpdate 【帮助解决一些性能上的问题】返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。
-
componentWillUpdate 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
-
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
-
componentWillUnmount 【做一些清除的动作】在组件从 DOM 中移除的时候立刻被调用。
官方api文档：https://reactjs.org/docs/react-component.html
Goto: 生命周期流程图
Mounting 第四个componentDidMount常用。
Updating 第四个componentDidUpdate常用。
其他不太常用。
附加题：React Native 中 component 生命周期
(1) 这里的 app 代表挂载点：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"></div> <script type="text/babel"> ReactDOM.render( <h1>hello world</h1>, document.getElementById("app") ) </script> <script src="https://cdn.bootcss.com/react/16.2.0/umd/react.development.js"></script> <script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.development.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script> </body> </html>
(2) react 应用最好用的脚手架 create-react-app
- 创建项目
- 先安装nodejs
- 再安装create-react-app这条命令
- 之后通过该命令生成项目hello-react
结果：生成了如下默认的文件，也就是默认空项目。
- 下一步导航提示
- 开启开发环境的服务器
yarn start ----> 开启3000端口，开始默认的react页面。
- 绑定到静态文件
yarn build ----> 得到如下两条命令提示
yarn global add serve
serve -s build
相继执行两命令，得到如下图：
默认监听在5000端口，貌似跟上述的端口3000显示的是一样的内容。
以上，便是生成一个新项目到运行的过程。
- 运行现成项目
$ npm start
unsw@unsw-UX303UB$ npm start
> hello-react@0.1.0 start /media/unsw/CloudStorage/Linux-pan/ExtendedTmpSpace/Android-Workplace/android-and-ml/React-Native/demo-react/rails365/hello-react-master
> react-scripts start
Starting the development server...
Compiled successfully!
You can now view hello-react in the browser.
Local: http://localhost:3000/
On Your Network: http://10.248.169.134:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.