react基础

React 的特点
1） 声明式编程
2） 组件式编程
3） React Native 编写原生应用
3） 高效（优秀的 Diffing 算法）
_ React 高效的原因 _
1） 我们的 React 它是直接去使用的虚拟 Dom，而不是直接去操作我们的真实 Dom
2） 使用 Dom diff 算法，可以最小化的重绘我们的页面

bable.js
1） ES6 ==> ES5
2） JSX ==> JS

在 html 中书写 react
1） 引入 react 核心库 ——react.development.js 2) 引入 react-dom，用于支持 react 操作 Dom ——react-dom.development.js 3) 引入 babel，用于将 jsx 转为 js —— babel.min.js
注意 script 标签中 type = “text/babel”

Js创建虚拟Dom

    const VDom  = React.createElement(标签名，标签属性，标签内容)
    const VDom  = React.createElement('h1'，{id:'title',class:''}，'Hello，react')
    ReactDom.render(Vdom,document.getElementById('test'))

Jsx 创建虚拟Dom

    const Vdom = (
        <h1>
            <span>Hello,react</span>
        </h1>
    )
    ReactDom.render(Vdom,document.getElementById('test'))
    /* 虚拟dom
    1. 本质是Object类型的对象（一般对象）
    2.虚拟Dom比较'轻'，真实Dom'重'，虚拟Dom是react内部再用，无需真实Dom那么多属性
    3.虚拟Dom 最终会被React转化为真实Dom，呈现再页面上。
    
    */

###JSX
1） 全程 Javascript XML
2） react定义的一种类似于XML的Js扩展语法：JS+ XMl
3） 本质是React.createElement(标签名，标签属性，标签内容) 方法的语法糖
4) 作用： 用来简化创建虚拟DOM

  a. 写法： let ele = <h1>hello</h1>
  b. 注意1： 他不是字符串，也不是HTMl/XML 标签
  c. 注意2： 他最终产生的就是一个JS对象

语法规则：
<1> 定义虚拟dom时，不要加引号
<2> 标签中混入***JS表达式***时，要用{}
<3> 样式类名指定不要用class，要用className
<4> 内联样式，要用style = {{key：value}}的形式去写
<5> 虚拟DOm 必须只有一个跟标签
<6> 标签必须闭合 如 ||
<7> 标签首字母
（1） 若小写字母开头，则将该标签转为html中同名元素，若html无该标签对应的同名元素，则报错
（2） 若大写字母开头，React就去渲染对应的组件，若组件没有对应，则报错
Js语句和JS表达式

1. 表达式： 一个表达式会产生一个值，可以放在任何一个需要值的地方
   下面这些都是表达式：
   (1) a
   (2) a+b
   (3) demo (1)
   (4) arr.map()
   (5) function test(){}
2. 代码
   下面这些事语句
   (1) if(){}
   (2) for(){}
   (3) switch(){case:XXXX}
   React面向组件编程
   1） 函数式组件
   <1> 创建函数式组件

            function Demo(){
                console.log(this)  // undefined ，因为babel编译后开启了严格模式
                retunrn (<h1>我是简单组件的定义</h1>)  // 无状态
            }
            ReactDOM.render(<Demo />,document.getElementById('test'))

2） 类式组件
<1>创建类式组件

            class Mycomponent extends React.Component{
                render(){
                    // render 是放在类的原型对象上，供实例使用。
                    // render的this 是谁 ——Mycomponent的实例对象，Mycomponent组件实例对象
                    return (<h1>我是类定义的组件（适用于【复杂组件】）</h1>)  //（有状态）state
                }
            }
            ReactDOM.render(<Mycomponent />,document.getElementById('test'))
            /*
             执行了ReactDOM.render(<Mycomponent />,...) 之后，发生了什么？
             1.React解析组件标签找到了Mycomponet组件，
             2.发现组件时使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法
             3.将render返回的虚拟Dom转为真实Dom，随后呈现在页面中。
            */