React使用分享

百世经纶『一页書』

已于 2022-06-16 15:18:24 修改

阅读量718

点赞数

分类专栏： Front 文章标签： react

于 2021-11-26 11:25:05 首次发布

本文链接：https://blog.csdn.net/weixin_43916074/article/details/121555944

版权

Front 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

React使用分享

在这里插入图片描述

1.核心思想

1.1 特点

声明事的设计
高效，采用虚拟的dom来实现dom的渲染，最大限度的减少dom的操作
灵活，跟其他的库灵活搭配使用
JSX，俗称在js中写html，javascript语法的扩展
组件化，模块化，提高复用性
没有数据的双向绑定功能

1.2 虚拟DOM

Dom的本质：浏览器中的概念，用js对象来表示页面上的元素，并提供操作Dom对象的API.
虚拟Dom：是框架的概念，用js对象来模拟页面上的Dom和Dom嵌套

在这里插入图片描述

1.3 Diff算法

Tree diff：新旧两颗Dom树，逐层进行对比，找到所有需要按需更新的元素

在这里插入图片描述

Component diff：在tree diff过程中，每一层中component的对比
    如果前后对比，组件的类型相同，则暂时认为不需要更新
    如果对比前后，组件的类型不同，则需要先删除component，然后在创建component，并追加到页面上。

2. 构建项目

2.1 Nodejs install

下载：Nodejs download.

1.查询版本：先配置环境变量，打开cmd  
    npm –v 
    node –v
2.全局环境变量：NODE__PATH
    D:\Application\nodejs
3.npm就是包管理器，nodejs类似于java的jvm

1.配置npm
    先在node.js目录下新建两个文件夹node_global和node_cache
2.然后cmd执行：
    npm config set prefix "D:\Application\nodejs\node_global"
	npm config set cache "D:\Application\nodejs\node_cache"
3.添加用户环境变量
	在path中新增
	D:\Application\nodejs\node_global

2.2 Create Project

1.淘宝镜像
   npm install -g cnpm --registry=https://registry.npm.taobao.org
2.换源
   npm config set registry http://r.cnpmjs.org/
   npm config set registry https://registry.npmjs.org/
   npm config get registry
3.安装脚手架
   npm Install –g create-react-app  
4.创建项目   
   create-react-app helloworld

npm目录如下：
在这里插入图片描述
打开创建的项目，目录结构如下，使用VsCode：

3. 语法

生命周期的三个状态

Mounting：将组件加载到dom中
Updating：将数据更新到dom中
Unmounting：将组件移除

生命周期的钩子函数

componentWillMount：组件将要渲染
componentDidMount： 组件渲染完毕
componentWillReceiveProps：组件将要接收props
shouldComponentUpdate：组件接收state或者props，判断是否更新，返回布尔
componentWillUpdate：组件将要更新
componentDidUpdate：组件更新完毕
componentUnmount：组件卸载

4. 函数式组件和类组件

5. 项目结构

5.1 html中使用

在这里插入图片描述

5.2 脚手架创建

在这里插入图片描述

6. Redux

Redux	React-Redux
Redux 是一种架构模式（Flux 架构的
一种变种），它不关注你到底用什么库，你可以把它应用到 React 和 Vue，甚至是 jQuery中。	React-Redux是Redux和React.js结合起来的一个库。它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据。
和组件进行对接的时候是直接在组件中进行创建。	运用Provider将组件和store对接，使在Provider里的所有组件都能共享store里的数据，还要使用connect将组件和react连接
获取state是直接通过store.getState()	获取state是通过mapStateToProps函数
使用dispatch直接触发，来操作store的数据	使用mapDispathToProps函数然后在调用dispatch进行触发

6.1 Redux Detail

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。
Redux 除了和 React 一起用外，还支持其它界面库。它体小精悍（只有2kB，包括依赖）。

官网提供的Demo：
在这里插入图片描述

简单操作，将appstate渲染到两个div里面

如果多个component都来修改appstate，会出现很多不可预测的结果，进行优化，使用dispath进行修改。

通过createStore来创将store，在修改和查询

每次修改都要手动渲染，将renderApp放进dispath方法里面，通过使用监听函数

惊喜吧。我们已经手动封装了一个入门级的Redux，回头看官网demo，so easy!!!

6.2 三大原则

单一数据源	State 是只读的	使用纯函数来执行修改
整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中	唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。	为了描述 action 如何改变 state tree ，你需要编写 reducers。