React 基础与实践 | 青训营笔记

家人们，我来交作业啦！ 以下是杨雨涵老师主讲的React 基础与实践课程的笔记。 通过这个课程，可以了解的内容有： 课程内容主要有：

01 React 简介与特性
02 React 基础温故知新
03 业务场景案例
04 课程总结与答疑

01 React 简介与特性

      React是用于构建用户界面的JavaScript库，起源于Facebook的内部项目，
   该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，
   用于架设Instagram的网站。
      React主要用于构建UI。可以在React里传递多种类型的参数，如声明代码，
   帮助开发者渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、
   甚至是可交互的应用组件。



   

特性：

1. 声明式设计：React 使创建交互式 UI 变得轻而易举。
为应用的每一个状态设计简洁的视图，当数据变动时 React能高效更新并渲染合适的组件。
2. 组件化: 构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。
3. 高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
4. 灵活：无论使用什么技术栈，在无需重写现有代码的前提下，通过引入React来开发新功能

02 React 基础温故知新

等待资源加载时间和大部分情况下浏览器单线程执行是影响 web 性能的两大主要原因。

React 的更新流程：

react组件的使用：

 React 组件的介绍
            组件是 React 中的一等公民，使用React 就是在用组件

            组件表示页面中的部分功能

            组合多个组件实现完成的页面功能

            组件的特点：可复用，独立，可组合

  1）使用函数创建组件
             使用JS的函数（或者箭头函数）创建的组件

             约定：函数名称必须以大写字母开头,React据此区分组件和普通的React元素

                        函数组件必须有返回值，表示该组件的结构
                        
  2）使用类创建组件
         约定: 类名称必须以大写字母开头 

                   类组件应该继承React.Component父类，从而可以使用父类中提供的方法和属性        

                   类组件必须提供render方法

                   render() 方法必须有返回值，表示该组件的结构  
                   
   3）组件抽离为独立js文件。 以hello.js为例
            创建js文件

            在js文件中导入React。 import  React from 'react'

            创建组件（函数或者类）

            在js 中导出该组件                

03 业务场景案例

组件性能优化 案例

组件性能优化 代码

组件挂载位置 案例

组件挂载位置 代码

04 课程总结与答疑