React

React:
  1、ReactJS
    1.1 概述
      what?
       reactjs是在web开发中 实现ui的js库
      when?
       数据操作比较频繁的场景
      why?
        VDOM 提升浏览器的性能
        单向数据流 减少业务的复杂度、维护的成本
      how?
       方案1：
        npx create-react-app my-app
        cd my-app
        npm start
       方案2：
        引入对应的js文件
       
    1.2 完成一个组件类的创建和调用
     1.2.1 创建
      src/components/demo01

      import React,{Component} from 'react';
      
      export class Demo01Component extends Component{
       
       render(){
         return <h1>hell</h1>
       }

      }
     1.2.2 调用
      import {Demo01Component} from '**'
      <Demo01Component></Demo01Component>
     1.2.3 注意事项
      ①在组件类中 不允许直接返回多个要渲染的元素内容
      ②render的return时，第一个标签不允许直接换行
      
  2、五大核心概念
    jsx(重点)：
     并不是一种新的语言，只不过是js的扩展，允许在js写标签
     ①遇到<,在js中直接调用标签
     ②遇到{,在标签内部通过{expression}执行表达式
    props：
      知识点1：实现父与子的通信
       <son myTitle='123'></son>
       this.props.myTitle
      知识点2：调用子标记元素
        this.props.children 指的是在调用标签时，标签内部所写的字标记
        React.Children.map(
          this.props.children,
          (value)=>{
            return value
          }
          )
      知识点3：实现子与父的通信
        步骤1：在父组件定义一个有参数的方法
        步骤2：将方法传递给子组件
        步骤3：子组件调用该方法，同时传参
    component：
      React的核心思想就是:组件的封装和复用
    ref：
      得到子组件的实例对象，进而主动获取子组件的数据和方法进行一些操作
      步骤1：
        <son ref='mySon'></son>
      步骤2：
        this.refs.mySon.**
    state(重点)：
      ①管理数据
        //初始化
        this.state = {count:1}
        //读
        this.state.count
        //写
        this.setState({count:2})
      ②实现一个绑定的效果
        (将状态中的数据和视图结合在一起，当状态发生变化，视图就会跟着进行更新)
       <any>{this.state.count}</any>
       <h1 style={{opacity:this.state.**}}></h1>
  3、生命周期
    React中组件有着自己的生命周期
     mount (初始化)
      componentWillMount
      componentDidMount
     update (状态或者属性传来的值数据变化时，做逻辑判断和处理)
      componentWillUpdate
      componentDidUpdate
      componentWillReceiveProps
     unmount (组件销毁时，执行清理工作)
      componentWillUnmount
  4、进阶知识(重点)
    4.1 实现循环(v-for/*ngFor)
      通过遍历要循环的集合，动态的返回要显示的元素或者组件
      {
        this.state.list.map((value,index)=>{
            return <li key={index}>{value}</li>
        })
      }
    
    4.2 实现条件判断(v-if/*ngIf)
      短路逻辑（与运算）
      {
        expression
        &&
        <Any></Any>
      }
      表达式执行结果为真，显示；否则就是不显示
    4.3 处理受控表单元素
      在reactjs中的表单元素指定了value/checked/selected等相关的属性，表单元素操作的结果会发现和预期的不一致，就称作为受控表单元素

      解决方案：借助于状态绑定的效果来解决受控问题
       步骤1：初始化状态
        state = {myValue:'123'}
       步骤2：将状态绑定到value属性
         <input value={this.state.myValue}/>
       步骤3：在事件处理函数中 完成状态的写操作
         handleChange(e)=>{
           this.setState({myValue:e.target.value})
         }

         <input 
         onChange={this.handleChange}
         value={this.state.myValue}/>