react脚手架快速创建react项目
方法一：
1.本地安装node.js/npm 此步省略
- npm install -g create-react-app
3.create-react-app my-project
4.npm start
本地项目启动，网页自动打开
方法二：
1.npm install -g yo //需先装yeoman
2.npm install -g generator-react-webpack
3.mkdir new-react-demo
4.cd new-react-demo
5.yo react-webpack
1 React代码渲染过程
组件第一次被渲染时，依次调用的函数
(1) constructor
(2) getInitialState
(3) getDefaultProps
(4) componentWillMount
(5) render
(6) componentDidMount
更新过程
(1) componentWillReceiveProps
(2) shouldComponentUpdate
(3) componentWillUpdate
(4) render
(5) componentDidUpdate
卸载过程
(1) componentWillUnmount
箭头函数
odds = evens.map(v => v + 1)
pairs = evens.map(v => ({ even: v, odd: v + 1 }))
nums = evens.map((v, i) => v + i)
上述箭头函数转化为实际的javascript函数为：
odds = evens.map(function (v) { return v + 1; });
pairs = evens.map(function (v) { return { even: v, odd: v + 1 }; });
nums = evens.map(function (v, i) { return v + i; });
React生命周期函数，这个东西很重要。下面这篇文章写的挺好的，要在日后的运用中多多体会。
https://nsne.github.io/2017/02/15/react-component-lifecycle/#more
https://www.jianshu.com/p/9203997f053d
Mount - update - unMounted
Mount：
1 Constructor
2 getInitialState
3 getDefaultProps
4 componentWillMount
5 render
6 componentDidMount
Update:
1 componentWillReceiveProps
2 shouldComponentUpdate
3 componentWillUpdate
4 render
5 componentDidUpdate
unMounted
1 componentWillUnmount
另一个是JS的有些字符是识别是需要加上转义字符地
1、如果用“.”作为分隔的话必须是如下写法String.split("\."),这样才能正确的分隔开不能用String.split(".");
2、如果用“|”作为分隔的话必须是如下写法String.split("\|"),这样才能正确的分隔开不能用String.split("|");
“.”和“|”、 "*" 都是转义字符必须得加"\";
npm 安装React Devtools调试工具
https://blog.csdn.net/wp_boom/article/details/79011177
在win10 64位系统下,关于nodejs下通过npm install环境部署项目时出现报错’MSBUILD : error MSB4132: 无法识别工具版本“2.0”。可用的工具版本为 “4.0”。’的解决办法
https://www.whidy.net/windows-10-64bit-nodejs-error-msbuild-error-msb4132.html
https://www.cnblogs.com/iTlijun/p/8193588.html
阶段函数
let timeoutId
function callback() {
console.log(456)
}
window.addEventListener('scroll',function(){
// 正在加载更多，则直接返回
if(this.props.isLoadingMore){
return
}
console.log(123)
if(timeoutId){
clearTimeout(timeoutId)
}
timeoutId = setTimeout(callback,50)
}.bind(this), false)
webpack配置自定义端口80
当使用React启动项目时, 默认的监听端口是8080。在 webpack.config.js 文件 加上如下一段，可以设置自定义监听端口：
devServer: {
inline:true,
port: 80
},
React类中不能使用箭头函数（这个问题真心坑，弄了好久，下面方法很给力）
