1.React （第一天）

React：

　　專門構建於用戶界面的js庫（頂多它是mvc中的v層框架）

　　核心思想，經過數據操做視圖。

　　官方（推薦使用）腳手架：create-react-app

　　中文網：https://react.docschina.org/

　　難點：英文、webpack

　　背景：react 是 Facebook 出品，背景大、生態比較豐富（pc、安卓、ios都適用）

　　相對vue來講只是寫法不同，思想都相似的，代碼相對vue來講要多一點點。基本上都是原生，本身寫的功能多一些。

---

　　聲明式：

　　　　好比：

　　　　　　let a = 100；//變量聲明

　　　　　　function fn(){} //函數聲明

　　　　react經過聲明一個類（函數）來建立UI的

　　　　　　1. class Person{} （類的申明方式有：狀態、this、生命週期。推薦用這種方式申明）

　　　　　　2. function(){}

---

　　安裝 create-react-app ：

　　　　npx create-react-app my-app （my-app 本身起的文件名）

　　　　cd my-app

　　　　npm start    /    yarn start

　　　　create-react-app （官方推薦使用的腳手架）

---

　　React 全家桶

　　　　react 、 react-router-dom 、 readux(mobx) 、 第三方UI庫antd 、 react-native 、 開發原生APP

　　　　react:（學習的內容）

　　　　　　jsx語法

　　　　　　state

　　　　　　props

　　　　　　數據的通訊

---

使用：(參考課件：2019-01-15_React -> app -> arc -> index2.js )

import React from 'react'; //主要的庫
import ReactDOM from 'react-dom'; //把jsx轉成可以讓瀏覽器識別的工具

//熱更新
if(module.hot){
    module.hot.accept();
}
/*  
    掛在組件。（根節點的掛載）
    *** ReactDOM.render()是個方法。三個參數：
        第一個參數：
            模板、組件
        第二個參數：
            掛載的根節點
        第三個參數：
            掛載完成以後觸發的回調函數
*/
ReactDOM.render(
    <div>你好，世界！!！！
        <input
            // defaultValue = {'123'}
            value = {'456'}
            onChange = {()=>{
                
            }}
        />

    </div>,
    document.getElementById('root'),
    ()=>{
        console.log('掛載成功')
    }
);

View Code

　　1.引包 react 、react-dom

　　2.ReactDOM.render(

　　　　<div> xxx </div>,

　　　　document.getElementById('root'),

　　　　()=>{

　　　　　　掛載成功以後的代碼

　　　　}

　　);

　　3.熱更新：（可用可不用）

　　　　if(module.hot){

　　　　　　module.hot.accept();

　　　　}

 

　　*** ReactDOM.render()是個方法。三個參數：

　　　　第一個參數：

　　　　　　模板、組件 （全部的模板頂層只可以有一個標籤 , jsx語法）

　　　　第二個參數：

　　　　　　掛載的根節點

　　　　第三個參數：

　　　　　　掛載完成以後觸發的回調函數

---

jsx -> javascript + xml 一種js和自定義寫法的混合模式

jsx 語法主要是爲了更好的讀、寫模板或者組件。

jsx 語法瀏覽器是不識別的，經過babel的方式吧jsx轉成瀏覽器識別的代碼（babel ： www.babeljs.cn)。

在react中，寫<div></div>,其實就等同於寫了一個 React.createElement('div',children:[],'click','active')

 

jsx規則：

　　1.遇到樣式中的 class ，直接變成className

　　2.標籤必須閉合 （/），特別是單標籤要注意

　　3.{}

　　　　*1）裏面放js代碼，能夠運行(運算) 好比：{console.log(1+'1')}

　　　　*2）默然幫你展開數組

　　　　　　[1,2,3] - > 1 2 3

　　　　　　[<li />,<li />]若是數組中的值爲組件(列表)，那麼必定要給列表中的每一項加key（key：一個惟一的值），爲了優化

　　　　3）註釋 {// 或者 /*2/}

　　　　*4）能夠申明函數，但不能直接調用

　　　　5）value={a} 賦值某個元素的屬性

　　　　6）設置style={{width:'200px',height:'200px',...}} 花括號包着一個對象

　　4.表單元素設置默認值（value='xxx'）的時候會報錯，由於它認爲input爲一個受限的組件。value值是動態就會操做數據（value就必定會變化），會變化，就必定要有事件（onChange），因此纔會報錯。

　　　　好比：<input value="1"/> 報錯

 

　　　　兩種方式解決：

　　　　　　1.給表單元素加上事件（onChange）（受控組件，官方推薦使用）

　　　　　　　　<input

　　　　　　　　　　value = {a}

　　　　　　　　　　onChange = {()=>{

　　　　　　　　　　}}

　　　　　　　　/>

　　　　　　2.定義默認值的時候就使用 defaultValue （非受控組件）

　　　　　　　　<input

　　　　　　　　　　defaultValue = '123'

　　　　　　　　/>

　　5.<img src={require('./images/地址.png')} alt=""/> 用img引入圖片的時候，要包{require('地址')}的方式

　　　　* 循環數據渲染的時候，引入圖片地址會出現沒法加載的問題：

　　　　解決：

　　　　　　1. src={require(""+地址)}，括號中放 地址+空字符串。而且圖片要在同級目錄下，也就是不能出現  ../   

　　　　　　2. 把相同的絕對路徑寫在 字符串裏 -->  src={require(" ../相同的路徑/xxx "+地址)} 。此時能夠出現  ../   

　　

　　6.用 ref 來快速找到DOM元素

　　　　1）給元素綁定 ref　<div ref = "a" > </div>　

　　　　2）用 this.refs.a 來獲取相對應的元素。

---

定義組件的方式：(參考課件：2019-01-15_React -> app -> arc -> index3.js )

import React from 'react'; //主要的庫
import ReactDOM from 'react-dom'; //把jsx轉成可以讓瀏覽器識別的工具

//熱更新
if (module.hot) {
    module.hot.accept();
}

//組件：申明一個類。***必定要注意：類的首字母要大寫（App）。
//組件在掛在的時候，會先執行construction，只會執行一次，而後通過幾個鉤子函數以後，走到render，
//只要數據發生變化，就再次執行render，而construction 是不會再改變
class App extends React.Component {
    constructor(props){
        super(props); //super的做用： 1.傳參 2.拿this
        console.log(props)
    }
    render(){     
        //普通的render中的return上面寫邏輯，return下面是UI       
        let {aaa,bbb,ccc} = this.props
        return(
            <div>
                <h1>組件</h1>
                <div>{aaa}{bbb}{ccc}</div>
            </div>            
        )
    }
}

//組件的申明：能夠是個類，還能夠是一個函數
function Ppa(){
    return(
        <div>
            <h1>組件2</h1>
        </div>
    )
}

/*
    屬性中若是有兩個重複的，後面會把前面的覆蓋
    ...[a,b,c]
    ...{a:'1',b:2,}
*/
ReactDOM.render(
    <div>
        {/* <App aaa='你好' bbb='世界' ccc={[1,2,3]} /> */}
        <App {...{
            aaa:'hello',
            bbb:'word',
            ccc:[4,5,6]
        }}/>
        <Ppa/>
    </div>,
    document.getElementById('root'),
);

View Code

　　class App extend React.Component{}

　　或者：

　　　　在import React,{Component} from 'react'; 引 Component

　　　　class App extend Component{          //推薦使用class，類名首字母要大寫

　　　　　　render(){

　　　　　　　　<div>

　　　　　　　　　　<h1>組件1</h1>

　　　　　　　　</div>

　　　　　　}

　　　　}

　　還能夠用：

　　　　function Ppa(){

　　　　　　return(

　　　　　　　　<div>

　　　　　　　　　　<h1>組件2</h1>

　　　　　　　　</div>

　　　　　　)

　　　　}

---

寫方法的時候，若是不對函數作處理，事件函數中的this指向undefined

　　解決方案：

　　　　1.使用create-app (推薦使用這種)

　　　　　　click = () => {}       //把匿名箭頭函數賦值給click

　　　　2.bind，this

　　　　　　click(){}

 

　　　　　　constructor(){

　　　　　　　　this.click = this.click.bind(this)

　　　　　　}

　　　　3.

　　　　　　click(){}

　　　　　　<button

　　　　　　　　onClick={this.click.bind(this)}

　　　　　　>

　　　　4.

　　　　　　click(){}

　　　　　　<button

　　　　　　　　onClick={(e,i)=>this.click(e)}

　　　　　　>

---

state 狀態

　　操做狀態中的數據，就能操做視圖

　　　　constructor(){

　　　　　　this.state={xx:oo}

　　　　}

　　操做數據不能直接使用this.state.xx=oo

　　***只能經過this.setState()去修改你的狀態

　　this.setState(對象（就是你state的數據）,()=>{當操做完數據以後的回調函數}) （推薦使用這種）

　　this.setState(函數(prev)=>{return {num:prev.num+1}},()=>{當操做完數據以後的回調函數})

---

props數據之間的通訊：(單向數據流)

父級傳子級：

　　傳遞數據在組件身上使用屬性的綁定

　　　　推薦使用：

　　　　　　<App {...{

　　　　　　　　xxx:'hello',

　　　　　　　　bbb:'word',

　　　　　　　　ccc:[4,5,6]

　　　　　　}}/>

　　子組件接收

　　　　this.props.xxx

 

//以上知識點的綜合應用（小todu）之 app.js(父級）
import React, { Component } from 'react'; import ReactDom from 'react-dom'; import List from './list'; class App extends Component { constructor(props) { super(props); /* state 等同於 Vue中的data： data() { return { } } */
    this.state = { val: '', arr: ['第一個li'] }; } /* 改變數據狀態使用 this.setState() */ change = (ev) => { this.setState({ val: ev.target.value }) } keyup = (ev) => { if (ev.keyCode === 13) { let { arr, val } = this.state; arr.push(val) this.setState({ arr ,val:''}); } } render() { let { val, arr } = this.state; let list = arr.map((e, i) => { //循環產生一堆<li> </li> return <List {...{　　　　　　　 //map方法會返回一個新數組[<li></li>,<li></li>,...],map方法必定要return，jsx的{}會自動展開數組 key: i,　　　　　　　　　　　　 //儘可能保證key的值是惟一的 val: e　　　　　　　　　　　　　//val和key是固定寫法，val是<li>的innerText }} />
 }); return ( <div className='App'>
        <input value={val} onChange={this.change} onKeyUp={this.keyup} />
        <ul> {list} </ul>
      </div>
 ); } } export default App;

//子組件 （list.js）
import React, {Component} from 'react'
class List extends Component{
    render(){
        return(
            <li>{this.props.val}</li>   //接收父級的數據
        );
    }
}

export default List;