一、react入门

1、是什么？

  用于构建用户界面的JavaScript库
  1、发送请求获取数据
  2、处理数据（过滤、整理格式等）
  3、操作DOM呈现页面

React是一个将数据渲染为HTML视图的开源的JavaScript库

2、谁开发的？

   Facebook开发，且开源
   1、起初由Facebook的软件开发工程师Jordan Walke创建
   2、于2011年部署于Facebook的newsfeed
   3、2013年5月宣布开源

3、为什么要学？

   （原生的痛点）
   1、原始JavaScript操作DOM繁琐、效率低（DOM-API操作UI）
   2、使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排
   3、原生JavaScript没有组件化编码方案，代码重复率低

4、React的特点

   1、采用组件化模式、声明式编码，提高开发效率及组件复用率
   2、在React Native中可以使用React语法进行移动端开发
   3、使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互

5、学习React之前需要掌握的前置知识

   判断this的指向
   class（类）
   ES6语法规范
   npm包管理器
   原型、原型链
   数组常用方法
   模块化

中文官网：react.nodejs.cn/learn

1.1 React的基本使用

依赖包

1、babel.min.js  
2、react-development.js   核心库，必须在扩展库之前引入
3、react-dom.development.js 扩展库

hello react案例

注意：

 1、第一步一定要准备好容器
 2、安装包引入的顺序要注意
 3、要写jsx，type=“text/babel”

1.2 React JSX

为什么不用js而用jsx

jsx 写虚拟DOM更方便（其实也是原始js创建虚拟dom写法的语法糖，通过babel解析）

js写虚拟dom，遇到嵌套会崩溃

虚拟DOM

1、本质是object类型的对象
2、虚拟dom比较“轻”，真实dom比较“重”，因为虚拟dom是react内部在用，无需真实dom上那么多属性
3、虚拟dom最终会被React转换为真实dom，呈现在页面上。

JSX基础知识

（1）全称：JavaScript XML
（2）react定义的一种类似XML的JS扩展语法：JS+XML
（3）本质是React.createElement(component,props,...children)方法语法糖
（4）作用：用来简化创建虚拟DOM
     a: 写法:var ele=<h1>hello JSX!</h1>
     b: 注意1:它不是字符串，也不是HTML/XML标签
     c: 注意2:它最终产生的就是一个JS对象
（5）标签名任意

JSX 语法规则

 （1）定义虚拟DOM时，不要用引号
  (2)标签中混入js表达式要用{}
  (3)样式的类名指定不要用class，要用className
 （4）内联样式要用style={{key:value}}的形式去写
 （5）虚拟DOM必须只有一个根标签
 （6）标签必须闭合
 （7）标签首字母
       1、若小写字母开头，则将该标签转为html中同名元素。若html中无该标签对应的同名元素，则报错。
       2、若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。



  一定要注意区分：【JS语句（代码）】与【JS表达式】
       1、表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
                 下面这些都是表达式：
                 (1) a
                 (2) a+b
                 (3) demo(1)
                 (4) arr.map()
                 (5) function test(){}
        2、语句（代码）
                 下面这些都是语句（代码）
                 (1) if(){}
                 (2)  for(){}
                 (3)  switch(){case: xxx}

1.3 模块与组件、模块化与组件化的理解

1.3.1 模块

理解：向外提供特定功能的js程序，一般就是一个js文件
为什么拆：随着业务逻辑的增加，代码越来越多且复杂
作用：复用js，简化js的便携，提高js运行效率

1.3.2 组件

理解：用来实现局部功能效果的代码和资源的集合（html/css/js/image等等）
为什么：一个界面的功能更复杂
作用：复用编码，简化项目编码，提高运行效率

1.3.3 模块化

当应用的js都以模块来编写的，那么这个应用就是一个模块化的应用

1.3.4 模块

当应用是以多组件的方式实现，这个应用就是一个组件化的应用

二、react面向组件编程

2.1 基本理解和使用

2.1.1 安装开发者工具调试

    谷歌商店自带：React Developer Tools

2.1.2 效果

（1）函数式组件

回顾一下jsx语法规则中标签语法
  《若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。》

函数定义组件首字母一定要大写

组件渲染到页面，要写标签

执行了ReactDOM.render(.....之后，发生了什么？)

React解析组件标签，找到MyComponent组件
发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中

 <script type="text/babel">
         //1、创建函数式组件
         function MyComponent(){
            console.log(this) //这里的this是undefined,bable翻译完开启严格模式，严格模式禁止自定义的方法指向window
            return <h2>我是用函数定义的组件，适用于【简单组件】的定义</h2>
         }
         
         //2、渲染组件到页面
         ReactDOM.render(<MyComponent/>,document.getElementById('test'))
        
        
    </script>

函数式组件示例

（2）类组件

ReactDOM.render(....>发生了什么？

React解析组件标签，找到了MyComponent组件
发现组件是使用类定义，随后new出来该类的实例，并通过该实例调用到原型上的render方法
将render返回的虚拟DOM转换成真是DOM，随后呈现在页面上

react中，如果用类定义组件，你的类必须继承react内置的类

构造器中render必须写，返回值必须写

render是放在原型对象上，供实例使用

render中的this是指向类的实例对象的

类式组件示例

   <script type="text/babel">
         //1、创建类式组件（类名就是你的组件名）
        class MyComponent extends React.Component {
             //这里构造器可以省略，以后会详解，官方没写
             //render是放在哪里的？ MyComponent类的原型对象上，供实例使用
             //render中的this是谁？--MyComponent的实例对象。MyComponent组件实例对象
             render(){
                console.log('this',this)
                return <h1>我是用类定义的组件，适用于【复杂组件】的定义</h1>
             }
        }
         //2、渲染组件到页面
         ReactDOM.render(<MyComponent/>,document.getElementById('test'))
       
    </script>

类中this的指向问题

为什么点击onClick调用changeWeather方法，this指向的是undefined？

onClick后面的花括号里面的没有直接调用changeWeather，只是通过类的实例对象沿着原型链查找找到changeWeather，然后交给onClick作为回调函数，等我们点击h1的时候，我们是直接从堆里把函数拉出来调用，这就不是通过实例调用的

类中的方法默认开启严格模式

由于changeWeather是作为onClick回调，所以不是通过实例调用，而是直接调用，而且由于类里面帮我们开启了严格模式，所以指向了undefined

类中this指向示例

   <script type="text/babel">
         //创建组件
         class Weather extends React.Component{
            //对组件实例初始化，需要写构造器
            constructor(props){
               super(props)  
               //初始化状态
               this.state={
                  isHot:false,
                  wind:'大风'
               }
            }
            render(){
                console.log(this)
                /*
                   
                */ 
                return <h1 onClick={this.changeWeather}>今天天气{this.state.isHot?'热':'冷'}</h1>
            }
            //changeWeather的方法放在了类的原型实例上，供实例使用
            changeWeather(){
              
                console.log(this)  //changeWeather不是通过Weather实例调用的，所以changeWeather中的this是undefined
            }
         }
         ReactDOM.render(<Weather/>,document.getElementById('test'))
         
           
    </script>

解决changeWether指向问题

changeweather本身是挂载原型对象上的，我们通过this.changeWeather=this.changeWeather.bind(this) 这个方式将原型上的changeWeather挂在类本身的方法上

示例

效果

小总结

点击n次事件，构造器调用1次、render调用1+n次，changeWeather调用n次

2.2 组件三大核心属性1:state

2.2.1 效果

类定义组件简化的方法如下

2.2.1 理解

state是组件对象最重要的属性，值是对象（可以包含多个key-value的组合）
组件被称为“状态机”（红绿灯），通过更新组件中的state来更新对应的页面显示（重新渲染组件）

2.2.3 强烈注意

组件中render方法中的this为组件实例对象
组件自定义的方法中this为undefined，如何解决？
- 强制绑定this：通过函数对象的bind
- 箭头函数（赋值语句+箭头函数）
状态数据，不能直接修改或更新

尚硅谷React学习笔记