react腳手架快速創(chuàng)建react項(xiàng)目

方法一：

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

2. npm install -g create-react-app

3.create-react-app my-project

4.npm start

本地項(xiàng)目啟動(dòng)，網(wǎng)頁(yè)自動(dòng)打開

方法二：

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代碼渲染過程

組件第一次被渲染時(shí)，依次調(diào)用的函數(shù)
(1) constructor
(2) getInitialState
(3) getDefaultProps
(4) componentWillMount
(5) render
(6) componentDidMount

更新過程
(1) componentWillReceiveProps
(2) shouldComponentUpdate
(3) componentWillUpdate
(4) render
(5) componentDidUpdate

卸載過程
(1) componentWillUnmount

箭頭函數(shù)

odds  = evens.map(v => v + 1)
pairs = evens.map(v => ({ even: v, odd: v + 1 }))
nums  = evens.map((v, i) => v + i)

上述箭頭函數(shù)轉(zhuǎn)化為實(shí)際的javascript函數(shù)為：

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生命周期函數(shù)，這個(gè)東西很重要。下面這篇文章寫的挺好的，要在日后的運(yùn)用中多多體會(huì)。

https://nsne.github.io/2017/02/15/react-component-lifecycle/#more

http://www.itdecent.cn/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

另一個(gè)是JS的有些字符是識(shí)別是需要加上轉(zhuǎn)義字符地

1、如果用“.”作為分隔的話必須是如下寫法String.split("\."),這樣才能正確的分隔開不能用String.split(".");

2、如果用“|”作為分隔的話必須是如下寫法String.split("\|"),這樣才能正確的分隔開不能用String.split("|");

“.”和“|”、 "*" 都是轉(zhuǎn)義字符必須得加"\";

npm 安裝React Devtools調(diào)試工具

https://blog.csdn.net/wp_boom/article/details/79011177

在win10 64位系統(tǒng)下,關(guān)于nodejs下通過npm install環(huán)境部署項(xiàng)目時(shí)出現(xiàn)報(bào)錯(cuò)’MSBUILD : error MSB4132: 無法識(shí)別工具版本“2.0”?？捎玫墓ぞ甙姹緸?“4.0”?！慕鉀Q辦法

https://www.whidy.net/windows-10-64bit-nodejs-error-msbuild-error-msb4132.html
https://www.cnblogs.com/iTlijun/p/8193588.html

階段函數(shù)

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

當(dāng)使用React啟動(dòng)項(xiàng)目時(shí), 默認(rèn)的監(jiān)聽端口是8080。在 webpack.config.js 文件 加上如下一段，可以設(shè)置自定義監(jiān)聽端口：

devServer: {
  inline:true,
  port: 80
},

React類中不能使用箭頭函數(shù)（這個(gè)問題真心坑，弄了好久，下面方法很給力）

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