React爬坑总结

react脚手架快速创建react项目

方法一：

1.本地安装node.js/npm 此步省略

2. 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类中不能使用箭头函数（这个问题真心坑，弄了好久，下面方法很给力）

https://blog.csdn.net/moxuelang/article/details/72863540