react--基础

1. react开源时间、特点

2013.5月份开源 facebook团队（图片分享）
声明式 组件化 一次学习，随处编写
react只是 mvc里面的view（视图层） Vue是完整的mvvm的框架

react 16.x版本之后搞出来一个Fiber协调引擎，是为了解决浏览器渲染组件，因为是同步进行的，造成浏览器卡顿问题。

2. 创建react的hello-world案例

npm init -y
npm i react react-dom babel-standalone
    (react/umd/react.development.js)
    (react-dom/umd/react-dom.development.js)
    (babel-standalone/babel.min.js)

3. jsx背后的原理？

jsx–>babel(React.createElement)—>虚拟dom（js内存对象）—> ReactDOM.render() 将虚拟dom渲染成真实dom

<div id="app"></div>

    <script type="text/babel">
        // jsx ==> javascript xml (jsx内部借鉴了xml一些语法规范，标签必须是闭合的、只能有一个根元素)
        // Babel会把jsx代码转译成一个名字React.createElement()方法进行调用
        const a = <div><h2 className='abc'>我是h2</h2><p>我是P标签</p></div>
        // const a = React.createElement(
        //             'div',
        //             {},
        //             React.createElement('h2',{className:'abc'},"我是h2"),
        //             React.createElement('p',{},"我是p"),
        //         );
        ReactDOM.render(a,document.getElementById("app"))
    </script>

4. react中表达式

{} 注意：不能直接渲染对象
undefined null boolean都不会进行渲染

5. react中事件

事件名字写成驼峰式命名   例如： onClick={()=>console.log(111)}

6. 数组的map迭代与key

{
    arr.map(item=>{
        return <li>{item}</li>
    })
}