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 = "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 = ['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>