react的學習

React的學習

第一天

1. react的安裝
2. 按照官網安裝
3. 建立的項目，文件是.jsx結尾 a. 在index須要引入，而且命名的首字母要大寫 b. ReactDOM.render渲染的是文件 4．兩種寫法 a. function First() { return (
   你好
   );

}

export default First; b. 類First繼承React.Component類 export default class First extends React.Component { render() { return (

你好react

); } } 4. react state 至關於vue的data,可是用法不一樣 綁定數據的方法 react 添加了一個類構造的函數來初始化狀態this.state,類組件應該始終props調用基礎構造函數 export default class First extends React.Component { //constructor 是構造函數 constructor(props) { //super是es6的關鍵字 super能夠用在類的繼承中，或是對象的字面量中 //super指代了整個prototype或者_proto_指向的對象 用在子類constructor函數中 super(props); this.state = { uesrname: '你好漂亮react', }; } render() { return (

//this.state來進行修改 {this.state.uesrname}

); } }

5. react的事件處理 react元素的事件處理和domy元素相似。可是有一點語法的不一樣： a. react事件的綁定屬於的命名採用駝峯式寫法，而不是小寫 b. 若是採用JSX的語法你須要傳入一個函數做爲事件處理函數，而不是一個字符串（DOM元素的寫法） 在react中不能使用return false的方式阻止默認行爲，必須明確的使用preventDafault change(){ this.setState({ name: 'hello', }) console.log(111) } React更新數據的方法，須要使用this.setState 對比vue使用的是@click

6. react的條件語句

7. changeColor(){

8. this.setState(prevState => ({
   複製代碼

9. color: !prevState.color
   複製代碼

10. }));
    複製代碼

11. if(this.state.color === true) {
    複製代碼

12. console.log(111)
    複製代碼

13. }else {
    複製代碼

14. console.log(222)
    複製代碼

15. }
    複製代碼

    //控制元素的顯示隱藏經過css樣式 在經過this.setstate進行數據的更新

16. if(this.state.show)
    複製代碼

17. {
    複製代碼

18. document.getElementById('parent').style.display = 'block';
    複製代碼

19. }
    複製代碼

20. else
    複製代碼

21. {
    複製代碼

22. document.getElementById('parent').style.display = 'none';
    複製代碼

23. }
    複製代碼

24. this.setState({show: !this.state.show});
    複製代碼

25. }

26. render() {

28. return (
    複製代碼

29. <div>
    複製代碼

30. <div onClick = { this.change }>
    複製代碼

31. {this.state.name}
    複製代碼

32. </div>
    複製代碼

33. {/* 事件處理以及判斷語句 */}
    複製代碼

34. <button onClick={this.handleToggleClick}>
    複製代碼

35. //三目預算符
    複製代碼

36. {this.state.showWarning ? '隱藏' : '顯示'}
    複製代碼

37. </button>
    複製代碼

38. {/* 元素的顯示隱藏 */}
    複製代碼

39. <p>{this.state.color ? '藍色' : 'blue'}</p>
    複製代碼

40. <div id="parent">react實現元素的顯示隱藏</div>
    複製代碼

41. <button onClick={this.changeColor}>點擊</button>
    複製代碼

42. </div>);
    複製代碼

43. } 對比vue使用的是v-if

7.react的循環遍歷數組和對象 render() { var siteElements=[]; //用forEach遍歷數據，在定義一個新的數組，在return裏面進行渲染 this.state.tags.forEach((item,index)=>{ siteElements.push( //須要有key值，否則會報錯，key基本上是爲index的值

網站：{item.address}

---

) }) return (

<div onClick = { this.change }> {this.state.name}

{/* 事件處理以及判斷語句 /} {this.state.showWarning ? '隱藏' : '顯示'} {/ 元素的顯示隱藏 */}

{this.state.color ? '藍色' : 'blue'}

react實現元素的顯示隱藏

點擊

{siteElements}

); } 對比vue使用的指令v-for

8.react 的ref 跟 vue的ref使用方法類似 React 支持一種很是特殊的屬性 Ref ，你能夠用來綁定到 render() 輸出的任何組件上。 這個特殊的屬性容許你引用 render() 返回的相應的支撐實例（ backing instance ）。這樣就能夠確保在任什麼時候間老是拿到正確的實例。

9.react 的表單及事件 handleChange(event){ console.log(event.target) this.setState({value: event.target.value}); }

{this.state.value}

對比vue表單使用的事v-model實現數據綁定的，

次日

1. npm run server 報錯 錯誤是：npm ERR! missing script: server

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\築夢\AppData\Roaming\npm-cache_logs\2019-06-04T02_38_05_725Z-debug.log

解決辦法：npm start 或者是 npm run start 或者是 npm run-script start 均可以直接解決，頁面正常打開

2. npm run build 打包react文件，文件夾是build,正常打包出來的頁面是空白頁，須要在package.json文件裏面加配置"homepage":"./"

3. {

4. "name": "my-app",

5. "version": "0.1.0",

6. "homepage": "./",

7. "private": true,

8. "dependencies": {

9. "react": "^16.8.6",
   複製代碼

10. "react-dom": "^16.8.6",
    複製代碼

11. 願你三冬暖，願你春不寒，願你天黑有燈，下雨有傘 React組件兩種導入方式 a. import (經常使用方式) b. require 區別： Import 是es6語法，require 是commonJS提出的，可是import 會經過babel轉換成CommonJS規範

12. 父子組件傳值

子組件經過props獲取父組件的值，子組件的事件經過ref來獲取當前的組件的一些的屬性和value值，子組件經過函數發送數據,須要用this.props this.props.handleEmail(val);

父組件寫一個函數負責接收子組件的值

區別vue 子組件也是經過props獲取父組件的值，須要用到this.emit("sendiptVal", this.inputValue)

第三天 1.react的生命週期 a.第一個是組件初始化階段 也就是代碼中類的構造方法(constructor()),自定義的類繼承了react.Component這個基類，也就繼承了這個react的基類，纔能有render(),生命週期等方法可使用。 Super(props)用來調用基類的構造方法(constructor()),也將父組件props注入給子組件，供子組件讀取(組件中props只讀不可變，state可變).而constructor()用來作一些組件的初始化的工做，如定義this.state的初始化內容。 b. 第二個是組件的掛載階段 此階段分爲componentWillMount,render,componentDidMount三個時期 ComponentWillMount: 在組件掛載到DOM前調用，且只會被調用一次，在這邊調用this.setState不會引發組件從新渲染，也能夠把寫在這邊的內容提早到constructor(),因此項目中不多用。 Render: 根據組件的props和state(無二者的重傳遞和重賦值，論值是否有變化，均可以引發組件從新render),return一個React元素(描述組件，即UI),不負責組件實際渲染工做，以後由React自身根據此元素渲染出頁面DOM.render是純函數(Pure function:函數的返回結果只依賴於它的參數；函數執行過程裏面沒有反作用)，不能在裏面執行this.setState,會有改變組件狀態的反作用。 componentDidMount: 組件掛載到DOM後調用，且只會被調用一次。 c.第三個是組件的更新階段 在講述此階段前須要先明確下react組件更新機制。setState引發的state更新或父組件從新render引發的props更新，更新後的state和props相對以前不管是否有變化，都將引發子組件的從新render.

d.形成組件更新有兩類(三種)狀況： 1.父組件從新render 父組件從新render引發子組件從新render的狀況有兩種 i. 直接使用，每當父組件從新render致使的重傳props,子組件將直接跟着從新渲染，不管props是否有變化。可經過shouComponentUpdata方法優化 ii. 在componentWillREceiveProps方法中，將props轉換成本身的state 是由於componentWillReceiveProps中判斷props是否變化，若變化了，this.setState將引發state的變化，從而引發render,此時就不必在作第二次因重傳props引發的render了，否則重複作同樣的渲染了 2.組件自己調用setState,不管state有沒有變化，可經過shouldComponentUpdate方法優化。 此階段分爲componentWillReceiveProps,shouldComponentUpdate,componentWillUpdate, render,componentDidUpdate i. componentWillReceiveProps(nextProps) 用於數據的監聽 此方法只調用於props引發的組件更新過程當中，參數nextProps是父組件傳給當前組件的心props。但父組件render方法的調用不能保證重傳給當前組件的props是有變化的，因此在方法中根據nextProps和this.props來查明重傳的props是否改變，以及若是改變了要執行啥，好比根據新的props調用this.setState出發當前組件的從新render ii. shouldComponentUpdate(nextProps,nextState) 此方法經過比較nextProps,nextState及當前組件的this.props,this.state,返回true時當前組件將繼續執行更新過程，返回false則當前組件中止更新，以此能夠用來減小組件的沒必要要渲染，優化組件性能。 iii. componentWillUpdate(nextProps,nextState) 此方法在調用render方法前執行，在這邊可執行一些組件更新發生前的工做，通常較少用。 iv. render render方法在調用render方法前執行，在這邊可執行一些組件更新發生前的工做，通常較少用。 v. componentDidUpdate(prevProps,prevState) 此方法在組件更新後被調用，能夠操做組件更新的DOM,prevProps和prevState 這兩個參數指的是組件更新前的props和state. 3.卸載階段 此階段只有一個生命週期方法：componentWillUnmount i. componentWillUnmount 此方法在組件被卸載前調用，能夠在這裏執行一些清理工做，好比清楚組件中使用的定時器，清楚compontDidMount中手動建立的DOM元素等，以免引發內存泄漏。

Vue八個生命週期
數據的監聽是用watch


react對比vue 的生命週期
複製代碼

beforeMount (componentDidMount) mounted (componentDidMount) beforeUpdate (componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate) updated (componentDidUpdate) beforeDestroy (componentWillUnmount) destroyed (componentDidUnmount)

2.相似的vue的computed computed屬性是vue的一大特點，它依賴於props、data生成新的計算數據，會根據props和data的改變而改變。computed中的數據默認只有getter屬性，也可設置setter屬性。在react中想對props或者state再加工通常都是另外再初始化一個state數據或者在render函數中建立臨時變量，特別是一些在顯示前的排序過濾方法都在render裏調用。另外computed中還包括vuex中mapState和mapGetters的數據。

3.爲何虛擬的dom會提升性能 虛擬dom至關於在js和真實的dom中間加了一個緩存，利於dom diff算法避免了沒有必要的dom操做，從而提升性能

4.受控組件和不受控組件 受控組件：受控組件（Controlled Component）代指那些交由 React 控制而且全部的表單數據統一存放的組件。是存放在組件狀態數據中。任什麼時候候咱們須要改變username變量值時，咱們應當調用setState函數進行修改。 不受控組件：則是由DOM存放表單數據，並不是存放在 React 組件中。咱們可使用 refs 來操控DOM元素。

5.爲何瀏覽器沒法讀取JSX 瀏覽器只能處理 JavaScript 對象，而不能讀取常規 JavaScript 對象中的 JSX。因此爲了使瀏覽器可以讀取 JSX，首先，須要用像 Babel 這樣的 JSX 轉換器將 JSX 文件轉換爲 JavaScript 對象，而後再將其傳給瀏覽器。