01——React入门

一、入门 

React特点：

1.采用组件化模式，声明式编码

2.使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互，

数据变化时，React会将新生成的虚拟DOM，与原先的DOM进行比较，一样的虚拟DOM就不在生成，新生成的虚拟DOM转为真实DOM，与页面上之前的真实DOM一块展示在页面上

关于虚拟DOM

      1.本质是object类型的对象

      2.虚拟DOM很 轻 真实DOM很 重  虚拟DOM没有很多的属性，

      3.虚拟DOM会被React转换为真实DOM，呈现在页面上

学习之前下载的相关js库

react.js、react-dom.js、babel.min.js，引入顺序不能变

实现一个小案例

页面中展示一个h1，并且内容为hello React

 <!-- type 必须为babel -->
   <script type="text/babel">
    //创建虚拟DOM
   const VDOM = <h1>Hello React</h1>

   //渲染虚拟DOM到页面
   ReactDOM.render(VDOM,document.getElementById('test'))

   </script>

二、虚拟DOM的两种创建方式

   <!-- 1.jsx 创建虚拟DOM-->
   <!-- type 必须为babel -->
   <script type="text/babel">
      //  const VDOM = <h1 id="title">Hello React</h1>
       const VDOM = (
         <h1 id="title">
            <span>Hello React</span>
         </h1>
       )
      //渲染虚拟DOM到页面
      ReactDOM.render(VDOM,document.getElementById('test'))
   </script>


   <!-- 2.js创建虚拟DOM -->
   <script type="text/javascript">
   //  const VDOM = React.createElement('h1', {id:'title'},'hello,react')
      const VDOM = React.createElement('h1', { id: 'title' }, React.createElement('span', {},'hello,react'))
      ReactDOM.render(VDOM, document.getElementById('test'))
   </script>

三、jsx语法规则

      1.定义虚拟DOM时不要写引号

      2.标签中混入js表达式要用{}

      3.样式的类型用className=""

      4.内联样式写法style={{key:value}}

      5.只能有一个跟标签

      6.标签必须闭合

      7.标签首字母

         (1).若小写字母开头，则将该标签转为html中同名元素，若html中无对应标签，则报错

         (2).若大写字母开头，react就去渲染对应的组件，若组件未定义，则报错

   <!-- type 必须为babel -->
   <script type="text/babel">
      const myId = 'aaa'
      const myName = '里斯'
      const VDOM = (
         <div>
            <h2 className="title" style={{color:'blue',fontSize:'32px'}} id={myId+'1'}>
               <span>{ myName}</span>
            </h2>
            <h2 className="title" id={myId+'2'}>
               <span>{ myName}</span>
            </h2>
            <input type="text" />
            <Good>123</Good>
         </div>
      )

      ReactDOM.render(VDOM,document.getElementById('test'))

   </script>

四、动态渲染数据

<!-- type 必须为babel -->
   <script type="text/babel">
      // 模拟数据
      const data = ['Angular','React','Vue']

      // 1.创建虚拟DOM
      const VDOM = (
         <div>
            <h1>前端js框架列表</h1>
            <ul>
               {data.map((item,index) => <li key={ index}>{item}</li>)}
            </ul>
         </div>
      )

   // 2.渲染虚拟DOM到页面
      ReactDOM.render(VDOM,document.getElementById('test'))

   </script>

注意区分：【js语句(代码)】 和【js表达式】

      1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

      变量a、a+b、arr.map()、function(){}

      2.语句(代码)：if(){}、for()、switch...case

五、函数式组件

 <!-- type 必须为babel -->
   <script type="text/babel">
   // 创建函数式组件

   function Demo() {
      console.log(this); // undefined babel编译开启严格模式，不能指向window
      return <h2>我是用函数定义的组件,适用于简单的组件的定义</h2>
   }

   // const VDOM = demo()
   //渲染组件到页面
   // ReactDOM.render(demo(),document.getElementById('test'))
   ReactDOM.render(<Demo/>,document.getElementById('test'))


   </script>

 六、类式组件

 <!-- type 必须为babel -->
   <script type="text/babel">
      class MyComponent extends React.Component{
            render() {
               return (
                  <h2>我是用类定义的组件,适用于复杂的组件的定义</h2>
               )
         }   
      }

      //渲染虚拟DOM到页面
      ReactDOM.render(<MyComponent />,document.getElementById('test'))

   </script>