React基础及其原理

React基础

 一、开始

我们一般在项目中 都会使用 React的脚手架 进行项目的初始化

最快捷的初始化方式就是运行

npx create-react-app 项目名

二、Jsx的基本使用

在react中  我们想要在页面中创建dom元素的方式有两种

1.使用createElement()

写着有点麻烦 一般不用 在此不演示

2.使用Jsx

我们更推荐Jsx后面这个( )的书写方式 

这样写的好处可以避免js自动插入分号的陷阱

三、嵌入js表达式

一般情况下，我们只需要使用{ } 在这个括号里面书写js代码就行 包括 函数表达式 ，但是，我们

我们考虑到优化 不建议直接在里面把业务逻辑代码 写进去。

注：{ }里面不写  对象   除了style 的样式

四、创建组件的两种方式

 一种是函数组件

 函数组件又称无状态组件，负责静态结构的展示

直接funcation 创建 

另一种是类组件

类组件称为有状态组件 负责更新ui，让页面动起来

使用的就是es6的class

我们  在里面 可以  在里面 声明状态state  以及 抽离业务逻辑代码  并在jsx的dom中调用 等

五、组件间的传值

父组件给子组件传值

父组件提供state 数据 

子组件以props的形式接受

子组件给父组件传值

 父组件需要提供一个接受数据的方法

子组件在内部调用方法

 这样  就可以将值 传给父组件 

 兄弟组件组件传值

 思路就是  一上面的  父传子  子传父 为基础

我们将一个子组件的数据 先传给父组件   父组件再将 这个数据 传给 另一个 子组件就行了

隔代传值

如果  嵌套过多的话   就不建议使用  上边的方式  进行传值了

推荐使用Context

这个就是有点联系上下文的感觉

 

只需要用<provider>  和 <consumer>进行包裹  就可以实现数据的传递 还是比较方便的

children属性 

组件当有节点的时候就会有chiildren属性

children  属性  就是 一个特殊的props 属性 

 

 通过children属性也可以进行传值

六、受控组件

理解了上面的组件 我们来看一下受控组件

通过受控组件可以对 被控制的组件的值 进行控制

（题外话：可以类比vue中的v-model的感觉 ）

七、props校验

进行props校验  可以在封装组件的时候 对传入组件中的数据类型进行控制， 如果  传入 不是这个组件props所需要的数据类型 组件可以进行具体的报错提示

以上这个就对传入App组件中的colors的数据类型  进行了限制 

具体使用 参考npm：prop-types - npm

 八、生命周期

 React的生命周期分为三个阶段

在创建时

在更新时 

 在卸载时

九、组件的复用

 这一块特别重要

分为：render props模式 和 高阶组件

这块可以参考：react 中render-props 模式和高阶组件_新时代农民工Top的博客-CSDN博客

 十、React路由

 SPA单页面应用程序的产生促使React路由的产生

它的使用需要安装react-router-dom这个包

截止到目前 最新版的 路由使用 和之前的不是太一样 

具体使用方法参考react-router-dom - npm

React原理

 React的setState（）

 要想多次调用setState（）  并且  每次调用都会有执行

并且  在这个基础上  我们还能在setState（）以后 执行回调函数

Jsx借助Babel的转换机制

 Jsx 语法会转换成 createElement（）的语法格式   然后再转成js的模式 最终渲染到页面上

组件的更新机制

 

 在这里谈谈优化：

可以将不必要的数据 储存在this上

 通过shouldComponentUpdate钩子函数解决不必要的更新

 

 这个在子组件props传值时这样使用

 但是我们可以不进行 以上这样的去使用shouldComponentUpdate钩子函数解决不必要的更新

 另一种方法是

使用纯组件

将react.component换成react.purecomponent

但是  在使用以上两种方法去处理数据更新变化监听时 的不必要更新时 

 对于引用数据类型 就是对象这种  我们对比的只是数据的存放地址  所以会出先错误

因此解决这种浅层的对比   我们只需要能够创建新的对象就行   坚持  数组也使用这种方法

 虚拟dom和diff算法

 react的更新视图的思想就是只要state发生变化  就重新渲染

 

 有了虚拟dom  就可以让js的运行在任何在地方，实现一次学习随处使用