day53（reactJS）

1.React框架的建造原因

	起源于FaceBook公司的内部项目，在架构公司内部项目时，FaceBook对当时市面上所有的
JavaScript MVC框架都不满意，认为MVC模式会使他们的项目变得更复杂，使得代码变得更加复杂和
不可预测，变得难以理解和调试，于是决定自行编写一套框架解决他们当时的项目问题

2.该框架解决了什么问题

	该框架用于解决大型项目在对体量庞大的数据状态进行管理时的需求（构建那些数据会随时间
改变的大型应用）

3.该框架有哪些特点

1.采用了虚拟dom（目的：通过数据模拟dom变化，减少对dom的操作次数，提高应用性能）
2.具有组件系统
3.单向数据流（尽量保持外--->内，降低数据流的复杂性）
4.具有jsx语法

4.该框架如何解决问题

1.虚拟dom结合diff算法
2.react框架的fiber算法（分片思想）
    React Fiber 的方法其实很简单——分片。把一个耗时长的任务分成很多小片，每一个小片的运
 行时间很短，虽然总时间依然很长，但是在每个小片执行完之后，都给其他任务一个执行的机会，
 这样唯一的线程就不会被独占，其他任务依然有运行的机会。

5.该框架和传统MVC的关系

	react 不是一个完整的 MVC 框架，最多可以认为是 MVC 中的 V（View），甚至 React并不非
常认可 MVC 开发模式；React 构建页面 UI 的库。可以简单地理解为，React 将将界面分成了各
个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页面（这个框架
主要就是用来写页面的）

6.该框架的使用步骤

1.安装React脚手架：npm i create-react-app 只需要安装一次
2.基于CRA（create-react-app）创建项目：create-react-app 项目名称(英文或数字，不能有中文)
    为什么基于脚手架创建新项目而不是直接创建html文档？
        1）直接创建html文档，在创建页面元素是，步骤繁琐导致效率低下，且代码可读性差
        2）ts，sass，及其他高级语法是浏览器所不能识别的，他们的转换和编译需要依靠大量的包，这些包脚手架会统一提供，使项目开发变得方便

7.React项目的主要部分

1.入口文件：index.js
2.根组件：App.js
3.启动项目：npm run start ，也可以简化为npm start
4.jsx语法：(可以快速生成类组件（rcc）和函数组件（rsc）)
    1）安装Reactjs code snippets插件（在vscode搜索插件而不是npm），可以使用jsx语法
    2）该语法就是书写react组件模板的语法
    3）它的目的是为了简化react组件模板的写法, 提升组件模板的开发效率,可读性
    4）可以结合数据一起使用(可以在标签中绑定数据) , 语法:  { 表达式 }
    5）{ } 中只能写表达式( 可以是简单表达式, 也可以是复杂表达式 ，表达式必须有一个结果，但普通语句不一定有结果，需要注意区分语句和表达式)
    6）jsx语法, for,class 都需要改写为 htmlFor, className（为了和js语言中的for和class区别，避免编译时发生冲突）
    7）注释也属于js语法，如果写在jsx的标签范围内，也需要加上{}才被当做注释语句，不然就会被当成字符串渲染出来
    8）js文件后缀改为.jsx可使用jsx语法
    9）tableIndex：该属性添加给标签，该属性属性值的大小决定元素在页面使用tab键时，获得焦点的顺序，属性值小的元素先获得焦点，属性越大顺序越靠后，不加该属性无法用tab键使其获得焦点
    10）htmlfor：该属性将对应的label标签与带有属性值为该属性值的id属性的input绑定（绑定之后点击label等同于点击input，都可以使其获得焦点）
    11）如果变量是数组，会展开数组所有的元素添加到模板中
5.定义组件的两种方式：（组件函数首字母必须大写，不大写引入显示不出来）
    1）类组件，也称 "有状态组件"（class component）
        React.component 这是官方组件，如果使用类组件，则必须继承这个官方组件的属性和方法，用extends关键字
    2）函数组件（又称无状态组件 stateless component）
6.定义组件的两种方法的区别：
    1）类组件中有组件实例，类似于vue的选项式API，他的实例是this，通过组件实例可以获取组件内部的状态和内部的方法
    2）函数组件中没有组件实例this，类似于vue组合式API
    3）类组件在constructor中定义状态
    4）函数组件不能定义状态

8.类组件相关

1.类组件会将函数render中的标签转换成标准的js语法，也就是react方法创建dom的语句，因此不会报错

2.构造函数constructor()：
    1）会在组件实例化时自动执行一次
    2）内部首行必须先写super(）函数
    3）在this.state={}中定义组件状态，这是固定写法，调用这里的状态也是使用this.state.状态名
    4）在constructor和super的括号中，系统会自动传参，继承官方组件的属性与方法

3.列表渲染
    1）通过map实现, 列表中每一项必须有key属性，与vue的列表渲染相同，此处的key也代表唯一属性，可通过map回调函数的第二个参数，也就是数组的下标赋值
    2）必须有return，且return后面必须有语句，至少要留下一个小括号，否则默认返回空值，函数中的标签无法渲染（return后面的标签语句可以用小括号括起来，return后面只留下半边小括号就可以）

4.绑定事件
    1）标签添加onClick={写函数}（注意，这里的onClick是属于react框架的专属点击事件，与原生js中的onclick不同）
    2）花括号里面的函数也可以定义在render同级的位置，然后使用this.函数名来进行绑定（注意绑定时不加圆括号，不然页面一加载就自动调用，触发事件反而没有效果，这是因为函数一旦被调用，就会产生一个值，如果绑定事件的函数没有返回值，那么就相当于给事件绑定了一个undefined，触发时没有任何效果）
    3）函数定义的两种写法：（都定义在和render的函数同级的位置）
        函数名=()=>{}
        函数名(){}

    4）绑定事件如何传参：绑定事件的位置函数嵌套在箭头函数中：()=>{this.函数名(参数)}（这样的写法保证了页面加载时事件绑定函数不会被调用，但是又可以给函数加上括号进行传参，但是要注意如果嵌套在箭头函数内部，此时绑定函数必须加上圆括号，无论是否传参）

5.组件更新
   1） 首先要注意，this.state中定义的所有状态都不是响应式的，修改这些数据是不能促使组件更新的，react框架中不存在响应式的概念
    2）所以，想要使组件更新，我们需要调用一个特殊的方法：this.setState({变量名:新值})
        1》该方法可以触发组件更新并保存状态值，但该方法是个异步操作 ( 不会立即保存组件状态值 )，在外部获取变量值只能获取到上一次更新缓存的值，可以将获取变量值的操作放入该方法的第二个参数，一个回调函数中，该回调函数会等到该方法的第一个参数执行完毕再执行，因此放在这里就可以拿到最新值
        2》在保存状态值时 是通过将传入的第一个参数(对象) 和 原来的 this.state 进行合并( 同名属性进行合并,合并的时候新值会覆盖旧值; 不同名的属性会添加到state对象中 )


6.条件渲染
    主要通过短路与，短路或和三目运算来实现
        短路与：{表达式&&<tag></tag>}（前者不成立时后者不渲染，前者成立后者渲染）
        三目运算：{表达式?<tag></tag>:' '}（表达式成立渲染标签，不成立渲染空字符串）

9.sass的使用

下载sass模块：npm i sass
css文件后缀改成scss即可使用sass语法