React知识点

一、1. React高效的原因：

虚拟DOM： 不总是直接操作DOM

DOM Diff算法： 最小化页面重绘        --->react会转换为真实DOM变化而更新界面

2. jsx语法：

主要用来创建虚拟DOM（元素）对象

（1）var cle = <h1>Hello!</h1>

  (2) 变量  {}

2. babel.js作用(浏览器引擎不能直接解析jsx语法代码)

（1）ES6-->ES5

（2）jsx -->js

二、渲染虚拟DOM（元素）

  (1)  语法    ReactDom.render(virtualDOM，containerDom);

（2）作用   将虚拟DOM元素渲染到真实容器DOM中显示

三、基本使用

  (1)定义组件

     1）工厂（无状态）函数

       无状态组件本质上是一个函数，传入props即可，没有state（不会重复渲染），也没有生命周期方法。组件本身对应的就是render方法。对于没有状态变化的组件，React建议我们使用无状态组件。

          function MyComponnet1(){

             return <h1>自定义组件标题</h1>

      }

     2）ES6类语法

         class MyComponent2 extends React.Component(){

               render(){

                   return <h1>......</h1>

           }

        }       

(2) 渲染组件标签

  ReactDom.render(<MyComponnet />, document.getElementId(''));

四、组件间通信总结

  （1）通过props传递   

1.父传子         this.props    

2.子传父（

父组件： （1）获取父本身属性this.state    （2）在父组件定义函数1（更新属性）（即回调函数）

子组件：  获取函数1this.props，传参

）

  （2）订阅--发布

  引入--订阅--发布