一篇关于react的总结

技术周文档one·关于react

1. 对比其他的框架

   1. 优势：
      ​ 1.虚拟dom(传统js操纵dom很耗性能)
      ​ 2.性能性很高
      ​ 3.解决一些终端的问题（pc、移动端问题）

   2. 劣势：
      1.学习成本很高、学习曲线很陡
      2.react本身能做的事并不多，想做大东西必须得用react插件（全家桶）

2. jsx自定义语法

   1. 写格式 ：
      ​ 1个标签的书写格式
      ​ let a = <div>hello react!</div>
      ​ 多个标签的书写格式 - 外面必须包一层根元素

   2. 可以自由缩进

      let a = <div>
                <div>sadasd</div>
                <span>asdasd</span>
            </div>
        允许加括号
      let a = (<div>
                <div>sadasd</div>
                <span>asdasd</span>
            </div>)
      
      单标签规则 - 必须闭合
        <img/>
        <input/>
        <br/>
        <div></div>
      class - className
        <div className='aaa'></div>
      
      jsx里面使用js代码{}
        var a = 'hello react!';
        let b = <div>{a}</div>
      

   3. jsx - 支持style - 里面使用json
      {{'background':'red'}}
      第一层是使用告诉jsx我要用js了
      第二层的是json的

   4. 使用驼峰命名法 单词的首字母大写
      第一个单词之后的首字母大写
      onclick -> onClick
      onmouseover -> onMouseOver

3.react的组件及class

1. js两种面向对象

   1.  es6之前那种 函数 -new 函数 = 类
      类 - constructor
      原型 - prototype （所谓的方法）
      原型链 - __proto__
   2. es6=class
      constructor - 默认执行的函数
      不支持变量提升
      原型就是 和 constructor 同级的函数即可
   
      继承 extends 可以继承原型和私有属性
      如果子类想使用必须使用 this
      子类constructor 放入super 
      参数如果想使用 子类参数放入 constructor 和 super 中
   3. js改变this指向
       1.call
        -1.第一个参数可以改变函数的this
        -2.从第一个参数之后的参数就是对应函数的行参
        -3.函数会默认直接调用
       2.apply
           -1.第一个参数可以改变函数的this
           -2.第二个参数是一个数组对象，数组对象的内容就是对应函数的行参
           -3.函数会默认直接调用
       3.bind
        -1.第一个参数可以改变函数的this
        -2.从第一个参数之后的参数就是对应函数的行参
        -3.函数不会默认调用
   

2. react 组件

   class 自定义名字 extends React.Component{
     render(){
         return (要渲染的内容)
     }
   }
   

4. react获取元素方式

   获取非本身元素
       1) <input ref='leo'/>
       获取：this.refs.leo
   
   获取本身事件源
       2）e.target
   
   原生的获取方法
       3)
       query
       byid
       byclass
       bytagname
       byname
   
       react - vue、ng不同的一点 react不限制你的使用方式
   

5. react - 生命周期

   componentWillMount 组件挂载前（组件渲染前）
   1.找不到元素
   2.属性、状态允许使用
   
   componentDidMount 组件挂载后（组件渲染后）
   1.可以找到元素
   2.属性、状态允许使用
   
   componentWillUpdate 组件更新前 
   
   componentDidUpdate 组件更新后
   
   componentWillUnmount 组件卸载之前
   

6. react的事件冒泡

   e <-react封装过的
   nativeEvent 原生的事件对象
   
   e.nativeEvent.stopImmediatePropagation()
   停止立即的传播
   

7. react的表单

   放在form里面的就是表单
   
   如input
   
   受控表单/非受控表单
   受控 value=''  checkbox 
   defaultValue='' 
   defaultChecked=''
   

8. react的交互

   并不限制你如何的去交互
   angular - $http
   vue - re....
   react - jquery/zepto/axios/fetch/ajax....
   
   虚拟dom 每一个内容都应该有自己的唯一标识
   key
   
   

9. react组件嵌套

   <Child msg={父组件的数据}/>
   
   <Child fn={父组件的一个函数.bind(this)};