Jsx 与虚拟dom的区别

  1. 1在reac 写的 jsx语法 react 通过React.createElement()这个方法将jsx转换成虚拟dom
  3. 最后，通过将这个虚拟dom 通过 ReactDOM.render()这个方法来将虚拟的dom 转换成真实的dom
  5. // eg：
  6. var VDOM =(<h1 id='test'>
  7.              <span className= 'content'>Hello React</span>
  8.            </h1>)
  10. 用babel 见jsx 语法转转换成虚拟的dom
  11.  var VDOM = React.createElement('h1',{id:'test'},React.createElement('span',{className:'content','Hell World'}))
  13. 最后通过ReactDOM.render()这个方法转换成真实的dom
  15. ReactDOM.render(VDOM,document.getElementById('test'))

虚拟dom

  1. 虚拟dom
  3. 1.本质是object 类型的对象（一般对象）
  4. 2.虚拟dom比较‘轻’，真实dom比较‘重’（真实dom上的属性比较多），因为虚拟dom是react在用，无需真实dom
  5. 那么多的属性
  6. 3.虚拟dom最终会被react转换成真实dom转换为真实的dom，呈现到页面上
  1. jsx 语法规则
  2. 1.定义虚拟dom时，不要写引号
  3. 2.标签中混入js表达式时要用{} --注意不是js语法
  4. 3.样式的类名指定不要class，要用className。 因为es6的clas是关键字避免两者冲突
  5. 4.内联样式，要用style={{key:value}}的形式去写
  6. 5.jsx中只有一个根标签
  7. 6.标签必须要闭合
  8. 7.标签首字母
  9. （1）若小写字面开头，则将该标签转换成html中的同名元素，若html中无该标签对应同名的元素，则报错
  10.  （2）若大写字面开头，react就去渲染对应的组件，若没有定义组件就会报错。
  12.  ==========================================================================================
  13.    一定注意区分：【js语句（代码）】与【js表达式】
  14.    1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
  15.     下面都是表达式：（1）a （2）a+b (3)demo(1) (4) arr.map()  (5) function test() {}
  16.    2.语句【代码】
  17.    下面这些都是语句（代码）：（1）if（）{} （2）for(){} (3)switch(){case xx}

JSX
1.全称：JavaScript XML
2.react 定义的一种类似于XML的JS 扩展语法：JS+XML 本质是
React.createElement(component,props,…children) 方法的语法糖
3.作用：用来简化创建虚拟DOM
1）.写法 ：var ele =

Hello JSX


2）.注意1：它不是字符串，也不是HTML/XML 标签
3）注意2：它最终产生的就是一个js 对象

  1. 标签名任意：HTML标签或其他标签
  2. 标签属性任意：HTML标签属性或其他
  3. 基本语法规则

1） 遇到< 开头的代码，以标签的语法解析：html 同名标签转换html 同名元素，其他标签需要特别解析
2） 遇到以{ 开头的代码，以js语法解析：标签中的js表达式必须用{} 包含

函数式组件

  1.  // 此处的this是undefined,因为babel 编译后开启了 严格模式
  2.         function MyComponent() { 
  3.           console.log(this);
  4.           return (
  5.         <h1>hello world</h1>
  6.           ) };
  7.       ReactDOM.render(
  8.         <MyComponent />, document.getElementById('test'));
  9.         /*
  10.         执行了ReactDOM.render(<MyComponent /> ....之后，发生了 什么？)
  11.         1. React解析组件标签，找到了 MyComponent组件
  12.         2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟的dom转换成真实的DOM，随后呈现在页面中
  13.         3.函数 式组件必须有返回值 尽管函数没有return 默认的返回值undefined 但是 react 没有 return 真正的值
  15.         */

注意事项：

  1.    ===================== 01 ==================================================
  2.     //这种写法后面会覆盖前面的 
  3.      const VDOM =<h2 className='hCss'>hello world </h2>
  4.       ReactDOM.render(VDOM,document.getElementById('test'));
  6.       const VOOM1= <h3>nihao1 ya1</h3>
  7.       ReactDOM.render(VOOM1,document.getElementById('test'));
  9.       ==================02========================================================
  10.       //react 当中 能便利数组 ，但是不会遍历对象
  12.       =======================03====================================================
  14.         class MyComponent extends React.Component {
  15.         render(){
  16.             return <h1>这是类式组件，属于复杂类式组件</h1>
  17.         }
  18.     }
  19.     ReactDOM.render(<MyComponent />,document.getElementById('test'));
  21.     /**
  22.      *    执行了ReactDOM.render 之后发生了 什么
  23.      *        1.React解析组件标签，找到了MyCompent 组件
  24.      *        2.发现组件是使用类定义的，随后new 出来该类的实例，并通过实例调用原型上的render()方法
  25.      *        3.将render返回的虚拟DOM 转换成真实dom，呈现到页面上
  26.      * 
  27.      * 
  28.     */