react基本語法及組件

1、react簡介

一、起源：React 起源於 Facebook 的內部項目，用來架設 Instagram 的網站，並於 2013 年 5 月開源。

二、特色：

1.聲明式設計 −React採用聲明式，能夠輕鬆描述應用。

2.高效 −React經過對DOM的模擬（虛擬DOM），最大限度地減小與DOM的交互。　　

3.靈活 −React能夠與已知的庫或框架很好地配合。　　

4.JSX − JSX 是 JavaScript 語法的擴展。React 開發不必定使用 JSX ，但咱們建議使用它。

5.組件 − 經過 React 構建組件，使得代碼更加容易獲得複用，可以很好的應用在大項目的開發中。

6.單向響應的數據流 − React 實現了單向響應的數據流，從而減小了重複代碼，這也是它爲何比傳統數據綁定更簡單。

　　解釋

　　　　a.聲明式設計 和 命名式設計

一、聲明式：你要作什麼事情 直接告訴機器  讓機器本身想辦法去作   你只須要獲得結果　　如數組中的map遍歷
                    var arr = [1,2,3,4,5];
                    arr = arr.map((item)=>{
                        return item+=2
                    })
                   console.log(arr)


二、命令式：你要作什麼事情 按照流程書寫告訴機器  讓機器去實現　　　　　　　　　　　　如使用for循環
                var arr = [1,2,3,4,5];
                for(var i=0;i<arr.length;i++){
                    arr[i]+=2;
                }

                console.log(arr)

 　　　　b.虛擬DOM　（）

 

真實的js對象   虛擬DOM與數據相結合生成最終的DOM結構(真實)
如    
            createElement("
                    <div>ffff</div>
                    <p>222</p>
                    <p>333</p>
                    <p>444</p>
                ")    
中間的標籤均爲虛擬DOM

 

 

 

2、基本語法

一、對比vue中的基本指令學習react的基本語法，

vue中包含  v-text  v-html  v-v-bind  v-if和v-show  v-for  v-on  v-model

import React from 'react'; import ReactDom from 'react-dom';

import App from './App';

// jsx 語法
    // let Dom = <h2>這是h2標籤包裹的內容，是jsx語法</h2>;

// let message = 'wppp';
// v-text
    // let Dom = <h3>{message} v-text</h3> // v-html
    // let message = <h2>wpppp v-html</h2>
    // let Dom  = <div>{message}</div> // v-bind
    // let message = 'wpppp v-bind';
    // let Dom = <h3 title={message}>{message}</h3> // v-if v-show
    // let message = 'wppp v-if v-show'
    // let Dom = true?<h3 title={message} style={{display:true?'block':'none'}}>{message}</h3>:'false'

// v-for
    // 不加key 會報警告：Warning: Each child in an array or iterator should have a unique "key" prop.

    // let arr = ['www','ppp','666']
    // let Dom = <ul>
    //     {
    //         arr.map((item,index)=>{
    //             return <li key={index}>{item}</li>
    //         })
    //     }
    // </ul>

 // v-on
　　//語法與原生事件用法相同

// v-model




ReactDom.render(
    // 
        Dom,
    // 調用外部引入的模塊，不可直接用App 而應該用<App/>
        // <App/>,
    document.querySelector('#root'),
    ()=>{
        console.log('這是第三個參數，是回調函數')
    }
)
// render
// 參數1:須要渲染的組件或虛擬dom
// 參數2:將渲染好的組件放到哪一個標籤上面
// 參數3:回調函數

 

二、組件的使用

如：上述引入的App，（src 下的 index.js）

import React from 'react';
import ReactDom from 'react-dom';
import App from './App';

ReactDom.render(
    <App/>,
    document.querySelector('#root'),
    ()=>{
        console.log('這是第三個參數，是回調函數')
    }
)
// render
// 參數1:須要渲染的組件或虛擬dom
// 參數2:將渲染好的組件放到哪一個標籤上面
// 參數3:回調函數

引入的App ,　　(src 下的 App.js),案例以下

import React,{Component,Fragment} from 'react'
import ReactDom from 'react-dom'

class App extends Component{
    constructor(){
        super();
        this.state={
            firstname:'www',
            lastname:'ppp'
        }
    }
    render(){
        let {firstname,lastname} = this.state;
        return(
            <Fragment>
                <div onClick={this.handleClick1.bind(this)}>
                    <p>{firstname}</p>
                    <p>{lastname}</p>
                </div>
            </Fragment>
        )
    }
    handleClick1(){
        // 
        this.setState({
            firstname:'eee',
            lastname:'ddd'
        })
    }
}
export default App;

　　需注意的是：

一、React.Component 全部組建的父類
直接在引用中引用，
import React ,{Component,Fragment} from "react";

二、在react當中全部的組件建立的時候必須首字母大寫， 爲了區分Element元素和組件的區別  如 App 

三、render  
    類型：生命週期函數
    做用：渲染虛擬DOM
    特色：當render渲染虛擬Dom的時候會將數據和虛擬Dom結合造成真正的Dom結構，會將當前的虛擬Dom在緩存中保存一份，
　　　　　 當數據發生變化時會將緩存中的虛擬DOm和第二次改變的Dom進行對比。修改要改變的節點，而不是改變全部的虛擬Dom。

四、Fragment 做用當作節點標籤使用 可是不會被渲染成標籤

五、constructor 初始化函數 能夠用來存放當前組件所須要的一些狀態，爲必寫項！！！
　　　　且super() 爲必需要寫的！！！

　　　　　狀態(屬性)存放在 this.state = {} 裏

六、react中的函數不用加()  如 <div onClick={this.handleClick1.bind(this)}>

七、react中若是須要改變this.state裏面的數據 須要用this.setState方法

　　　　　　用法爲：

　　　　　　　　this.setState({

　　　　　　　　key:val

　　　　　　　　})

　　　　　　　　key:須要修改的狀態

　　　　　　　　val:值

　　八、

　　class 須要改變成className　　for 須要改變成htmlFor <label>

　　如：

　　

// let Dom = <div className="abc">wpppp</div>

// let Dom = <label htmlFor="11">11</label>

 

碼字略累。。。且睡且長壽。。。。