Hello React

Hello React

学习react目的

为了更好的掌握JavaScript这门语言，提高JavaScript的熟练度，探索与vue不同的开发方式。

Start

• react有三大主要依赖：react、react-dom、babel，在不使用脚手架开发的时候，需要用户先引入这三个依赖

    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 引入react-dom -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> 
    <!-- 使用jsx -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

• react当中使用的是jsx语法，与JavaScript语法区别就是，在jsx当中是可以写html标签的，因此，很多东西我们就可以直接使用jsx来实现，比如组件封装等。使用jsx开发，需要在script标签的type类型更改为text/babel

      <script type="text/babel"></script>
  

创建虚拟DOM

• 在jsx当中创建的DOM元素，会被react使用render函数来转换为虚拟DOM，然后通过diff算法和页面上的DOM进行比对，然后找出更改的地方，然后对页面上的DOM元素进行更新。

  <script type="text/babel">
      //创建一个DOM元素，然后将它赋值给变量VDOM
    const VDOM = <h2>Hello React</h2>;
    //使用ReactDOM.render()来挂载到页面上
    //document.getElementById('test'),获取页面上id为test的属性
    ReactDOM.render(VDom,document.getElementById('test'))
  </script>
  

• 使用JavaScript来创建虚拟DOM

   <script type="text/javascript">
        // const VDom = <h1>Hello,React</h1>/*此处一定不能写引号，因为不是字符串*/
        // const VDOM = React.createElement("标签名",'标签属性','标签内容')
        const VDOM = React.createElement('h1',{id:'title'},'ReactDom')
        // 2.渲染虚拟DOM到页面上
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>

使用JavaScript来创建虚拟DOM要借助react内置的createElement()来进行创建，这也是react创建虚拟DOM的本质，在jsx当中，每一句html都会隐式的转换成这样