react运行机制这是我参与「第四届青训营」笔记创作活动的的第24天最简单的页面 1.通过cdn 什么是react元

这是我参与「第四届青训营」笔记创作活动的的第24天

最简单的页面

1.通过cdn

...
<body>
    <script src='https://unpkg.com/react@16/umd/react.development.js'></script>
    <script src='https://unpkg.com/react-dom@16/umd/react-dom.development.js'></script>
    <script>
    your code
    </script>
</body>
...

什么是react元素

React.createElement("h1",{id:"hello"},"hello react")创建的就是react元素==><h1 id='hello'>hello react</h1>
对html的react描述
就是一个对象

怎么渲染react元素

reactDOM.render(reactElement,position)
em

const reactElement=React.createElement('h1',{id:'hello'},'hello react');
ReactDOM.render(reactElement,document.querySelector('#root'))

可以渲染react元素数组

4. 怎么渲染react元素的子元素

可以将react元素当作父react元素的子元素
注意react元素中给类名用className
同ReactDOM.render()可以渲染react元素数组，react的子元素也可以通过react元素数组完成
同理一旦是数组渲染就要给key属性

const reactElement=React.createElement(
            'ul',
            {},
            React.createElement('li',{className:'heilight'},'li-1'),//z子元素同理也可以多写几个react元素
            React.createElement('li',{},'li-2'),
            React.createElement('li',{},'li-3'),
            React.createElement('li',{},'li-4')
            )
ReactDOM.render(reactElement,document.querySelector("#root"))

数组渲染

const reactElement=React.createElement(
            'ul',
            {},
            React.createElement('li',{className:'heilight'},'li-1'),//z子元素同理也可以多写几个react元素
            React.createElement('li',{},'li-2'),
            React.createElement('li',{},'li-3'),
            React.createElement('li',{},'li-4')
            )
ReactDOM.render(reactElement,document.querySelector("#root"))

6.react组件（函数式）

就是一个返回react元素的函数
当通过React.createElemens()传入组件时，会把 renderElement的prop传入

1. function reactCompoent({items}){
            return React.createElement('ul',{},items.map((v,key)=>React.createElement('li',{key},v)))
        }//这就是一个函数式组件
2. const renderElement=React.createElement(reactCompoent,{items:['li-1','li-2','li-3']},{})
3. ReactDOM.render(renderElement,document.querySelector("#root"))

总结创建使用一个函数式组件的步骤

创建一个函数，返回值是一个react元素，且这个函数可以收到props
声明组件，通过React.createElement将要声明的组件（函数）,props,children传入
渲染组件