React基本語法

React

1、導入

    0、局部安裝 react 和 react-dom

        npm install --save-dev react react-dom

 

    一、react語法塘

         import React from 'react';

 

    二、reactDom用來操做虛擬Dom【虛擬Dom：真實的js對象】

         import ReactDom from 'react-dom';

 

2、語法【經過實現vue的一些指令來學習react】

    0、react經過單花括號 {}來解析【vue：是經過雙花括號 {{}}來解析的】

 

    一、實現v-text

        let message = '小田田';

        let Dom = <h3>{message}</h3>;

        let Dom = <h3>{1+1}</h3>;

        let Dom = <h3>{2>1 ? 10 : 20}</h3>;

 

    二、實現v-html

        let message = <h2>小田田</h2>;

        let Dom = <div>{message}</div>

 

    三、實現v-bind

        let message = '小田田';

        let Dom = <h3 title={message}>{message}</h3>

 

    四、實現v-show【若是想加一個對象的話，要在括號裏面在加一個括號】

        let message = '小田田';

        let Dom = <h3 style={{display:true ? "block" : "none"}}>{message}</h3>

 

    五、實現v-if【下方元素在dom中不存在，也就是說 F12看不到】

        let Dom = false ? <h3>{message}</h3> : "";

 

    六、實現v-for【每個循環元素都要加 key ，數據變化是會根據這個屬性單獨去改變，而不是所有去修改】

        let arr = ['張三','李四','王五'];

        let Dom = <ul>

            {

                arr.map((item,index)=>{

                    return <li key={index}>{item}</li>

                })

            }

        </ul>;

 

    七、上面代碼依賴下放代碼

        /*

            ReactDom.render ：

                參數1：須要渲染的組件或者虛擬DOM【上方定義了DOM】

            

                參數2：將渲染好的組件或者虛擬DOM放在哪一個標籤上【下方案例標籤爲：id爲root的標籤】

 

                參數3：回調函數

        */

        ReactDom.render(

            Dom,

            document.querySelector('#root'),

            ()=>{

                console.log('渲染完成');

            }

        )