React入門

入門

1. 引入react
2. 創建容器
3. 創建虛擬DOM
4. 渲染虛擬DOM到頁面

    <!--引入react,react.develop要在react-dom之前--> 
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <!-- 創建容器-->
    <div id="test"></div>

    <!-- 寫babel,babel將jsx翻譯 -->
    <script type="text/babel">
        // 1 創建虛擬DOM
        const VDOM = <h1>hello</h1> // 不加單引號
        // 2 渲染虛擬DOM到頁面 , (虛擬DOM,容器)
        const container = document.getElementById('test');
        const root = ReactDOM.createRoot(container);
        root.render(VDOM);
    </script>

jsx語法規則

    // jsx語法規則
        // 1.不要加引號
        // 2.標簽中混入---JS運算式,要用{}
        // 3.樣式的類名指定要用 className
        // 4.行內樣式要用style={{key:value}}寫
        // 5.虛擬DOM只能有一個根標簽
        // 6.標簽必須閉合,比如input后面要加/使其閉合
        // 7.標簽首字母
        //   - 小寫,則表示html標簽,否則報錯
        //   - 大寫,則為React定義的標簽,未定義則報錯
   <script type="text/babel">
        const data = "https://www.cnblogs.com/ucbb/archive/2023/01/28/sjsjs"
        const VDOM = (
            <div>
                <h2 className="title" style={{ color: 'white', fontSize: '40px' }}>{data}</h2>
                <input type="text" />
            </div>
        )
        ReactDOM.render(VDOM, document.getElementById('test'))

    </script>

        // react可以自動遍歷陣列,但是不會遍歷物件
        const data = https://www.cnblogs.com/ucbb/archive/2023/01/28/['v1', 'v2', 'v3'];

        // 每一個li都應該有一個獨一無二的key,此處用index在某種情況下存在隱患
        const VDOM = (
            <div>
                <h1>hello</h1>
                <ul>
                    {
                        data.map((item, index) => {
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )

創建虛擬DOM的兩種方法

虛擬DOM

1. 虛擬DOM本質是object型別的物件
2. 虛擬DOM比真實DOM輕
3. 虛擬DOM最侄訓被react傳化為真實DOM,呈現在頁面中

js創建(一般不用)

    <script type="text/babel">
        // 1 創建虛擬DOM (標簽名, 標簽屬性, 標簽內容)
        const VDOM = React.createElement('h1', { id: 'test' }, 'hello')
        // 2 渲染虛擬DOM到頁面 , (虛擬DOM,容器)
        const container = document.getElementById('test');
        ReactDOM.render(VDOM, container)
    </script>

jsx創建

    <script type="text/babel">
        // 1 創建虛擬DOM
        const VDOM = <h1>hello</h1> // 不加單引號
        // 2 渲染虛擬DOM到頁面 
        const container = document.getElementById('test');
        const root = ReactDOM.createRoot(container);
        root.render(VDOM);
    </script>

面向組件編程

函式式組件

    <script type="text/babel">

        // 創建函式式組件 , 自定義的react組件要大寫
        function Demo() {
            return <h2>我是用函式定義的組件,用于[簡單組件]的定義</h2>
        }
        const root = ReactDOM.createRoot(document.getElementById('test'));
        root.render(<Demo />)
        // 執行了render之后
        // 1.react決議組件標簽,找到Demo組件
        // 2.發現組件是函式定義的,呼叫函式,將虛擬DOM轉換為真實DOM,呈現在頁面中

    </script>

類式組件

<script type="text/babel">

        // 創建類式組件 , 類必須繼承React.Component
        class MyComponent extends React.Component {
            // render放在MyComponent原型物件上,供實體使用
            // render中的this是MyComponent的實體物件
            render() {
                return <h2>我是用函式定義的組件,用于[簡單組件]的定義</h2>
            }
        }
        // 渲染組件到頁面
        const root = ReactDOM.createRoot(document.getElementById('test'));
        root.render(<MyComponent />)
        // 執行了render之后
        // 1.react決議組件標簽,找到MyComponent組件
        // 2.發現組件是類定義的,隨后new 這個實體,并通過該實體呼叫到原型上的方法
        // 3.將render回傳的虛擬DOM轉化為真實DOM,放在頁面中 
    </script>

標籤：其他

上一篇：JS值和型別（必學知識點總結）

下一篇：博客主題 Lite