React学习笔记（第一 天）

  1、概述
        reactjs是由Facebook所推出的一个js的库
    应用场景：
     用在数据操作比较频繁的场景，实现高性能的ui层
    优势：
     ①性能瓶颈
       vdom(virtual dom)

     ②代码的开发和维护成本
       单向数据流
    实现：
     1）引入js文件
      2）基于cli：
    npx create-react-app my-app
    cd my-app
    npm start

  2、第一个例子
    知识点:
     1、babel
      babel是一个js的编译器，可以将es6等高级语法 、jsx转换为浏览器能识别的版本
      <script type='text/babel'></script>
     2、方法
      ReactDOM.render(
        <h1>123</h1>,
    document.getElementById('example'))
     3、jsx

  3、五大核心概念
    3.1 jsx （react基石）
     jsx:JavaScriptXML 不是一种新的语言，只是js语法的一种扩展，允许在js中直接写标签
     
     jsx的优缺点：
       使用jsx封装、数据处理很方便
       增加了数据和视图的耦合度

     是否必须使用jsx?
       推荐使用
     
     语法:
      ①遇到<,会按照html来解析
      ②遇到{,会按照js的表达式来处理
     
     注意事项:
      在一个位置要渲染多个元素，要记得放在一个顶层容器中

    3.2 component (视图)
     组件:可被反复使用的，带有特定功能的视图
  
     react的组件的创建和使用:
      var MyComponent = React.createClass({
       render:function(){
        return <h1>123</h1>
       }
      });

      <MyComponent></MyComponent>

      注意事项:
       ①组件类的命名要遵循全驼峰式
       ②组件类的render方法 在渲染元素时候，第一个标签不要直接换行
       ③如果渲染多个标签，放在一个容器
       ④每一个标签都得有开始和结束标记
      
    3.3重点 props (父--》子 子--》父)
       
         ①基础用法(this.props 父--》子)
       <any myTitle='123'></any>
       this.props.myTitle

         一个组件要渲染的内容 只取决于自己的render方法的返回值

       如果想要指定子标记，而且还能显示
       this.props.children
       
       解决方案:
         React.Children.map(
       this.props.children,
       (value)=>{
            return value
         })

      ③通信（子--》父）
       共识:
         父组件在调用子组件时，是可以通过自定义属性 来完成方法的传递

       子--》父的通信工作：
     ①父组件准备一个有参数的方法
     ②将此方法传递给子组件
     ③子组件在调用父组件通过自定义属性传来的方法时，可以通过方法的参数将值传递给父组件       
      

    3.4 ref(父主动的到子组件取值)
      使用场景:
    ①直接找到一个组件中的某一个元素
    ②找到子组件的实例对象（父需要主动的到子组件中获取数据）

      基础用法:
        <any ref="myInput"></any>

        this.refs.myInput.**

    3.5重点 state(绑定/3个操作数据的方式)
      react中是靠state来完成数据的定义、读和写操作，
      ①state用在视图中 才会有绑定的效果

      ②3个基本操作:
        初始化：
     getInitialState:function(){
       return {count:0,page:1,list:[]}
     }
    读：
     this.state.count
    写：
     this.setState({count:1})
     this.setState({count:1},()=>{
       //状态写成功之后的回调函数
     })
      

   处理技巧:
    ①btn处理单击事件时，如果需要自定义传值:
     <button        onClick={()=>this.handleClick(10)}></button>
    ②动态样式处理
        
      <h1 style={{opacity:**}}></h1>

1、进阶用法
   1.1 生命周期
    react给组件的生命周期设定了钩子函数，意义就是为了让组件更可控，可以在某一个阶段，做我们指定的事情
       
    React component lifecycle hooks:

    mount:挂载 （负责初始化）
     componentWill/DidMount
    update:更新 (负责数据变化)
     componentWill/DidUpdate
     componentWillReceiveProps(只有在props传来的值变化时才会执行，放心的设置状态)
    unmout:卸载 (负责清理工作)
     componentWillUnmount
    
    注意:
     ①通过ref找元素或者组件实例，必须得等到挂载之后
     ②初始化工作可以统一在
      componentDidMount里
     ③和update相关的钩子函数中要谨慎使用setState
     ④子组件不可以修改父组件通过属性所传来的值(是只读的)；但是父组件是可以将一个变化的值通过属性传来，当父组件的数据变化，子组件是可以通过componentWillReceiveProps来接收最新变化的数据做处理

   官方的编程规范:
     react中方法可以分为两类，一个是自定义(handleClick..)，一个自带的(render/componentDidMount/getInitialState)
     将自带的写在前边，自定义的写在中间，将render方法写在最后边

   1.2 表单的特殊处理
     如果表单元素中 出现了value/checked/selected类似的属性，表单元素操作的结果是有问题，解决方案就是借助于state的绑定效果来实现
     ①初始化状态
     ②将状态的值 绑定到value/checked/selected属性
     ③在触发change事件时，修改状态即可

   
   3.3 实现循环或者判断的功能（重点）
     react没有像vue/angular一样的指令来增强的html模板
    
     条件判断:
      方案1：借助于短路逻辑来实现
       {
         expression
     &&
     渲染的视图
       }
       适用场景:用在条件相对简单的场合

      方案2:借助于方法的封装和调用
        showSth(){}
    
    {
      this.showSth()
    }

     循环:
      <any v-for="(tmp,index) in myList"></any>
         
      react:
       {
         this.state.**.map((value,index)=>{
       return <any key={index}></any>
     })
       }