对react的理解

是什么

React 是一个用于构建用户界面的 JavaScript 库。

能干什么

可以通过组件化的方式构建大型的，快速响应的大型web应用

如何做

声明式

React 使用jsx实现声明式，使创建交互式 UI 变得轻而易举。

以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

（另外一种是命令式--直接操作dom）

组件化

创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。--高内聚-低耦合

组件逻辑使用 JavaScript 编写而非模版，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。

一次学习，随处编写

虚拟Dom实现跨平台

无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。

React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。

缺点

没有官方系统解决方案，过于灵活，需要第三方库---客户端-服务端通信，react-redux，路由，表单等

为什么react引入jsx

是什么

jsx是一个js的语法扩展，可以很好的描述UI,

是react.createElement的语法糖

jsx被@babel/preset-react插件编译为createElement()方法
createElement() -> react元素(普通的js对象)

为什么

为了实现声明式，代码结构更加简洁，可读性强

不许引入新的语法和概念，用js写

比如：angular就使用了基于HTML的模板

对虚拟DOM的理解

react.createElement函数返回的就是一个虚拟DOM

虚拟DOM就是一个描述真实DOM的纯js对象

过程：

每当底层数据发生改变时，整个 UI 都将在 Virtual DOM 描述中重新渲染。

然后计算之前 DOM 表示与新表示的之间的差异。

完成计算后，将只用实际更改的内容更新 real DOM。

React与Angular有何不同？

   React Angular 
   只有 MVC 中的 View  完整的 MVC
   可以在服务器端渲染  客户端渲染
   使用 virtual DOM  使用 real DOM
   单向数据绑定  双向数据绑定
   编译时调试  运行时调试
   Facebook  Google

React中的合成事件是什么？

合成事件是围绕浏览器原生事件充当跨浏览器包装器的对象。它们将不同浏览器的行为合并为一个 API。这样做是为了确保事件在不同浏览器中显示一致的属性。

箭头函数

类组件中 this
事件中的this是undefined   render()中的this指向实例-就可以用了
解决
+ 箭头函数：自身不绑定this，指向外部环境 <button onClick={() => this.add()}> + </button>
+ Function.prototype.bind() 将事件中的this与组件实例绑定 构造函数(Constructor)中的this指向调用该构造函数所创建的实例对象(instance)。
+ 事件改为用箭头函数实现

组件通讯

- 父 => 子 属性传递
- 子 => 父 回调函数
- 兄弟 => 兄弟 由公共父组件管理状态
- 跨组件传递数据 Context
 

组件生命周期 类组件才有

创建时

- constructor() 初始化state
- render() 每次组件渲染都会触发（不能用setState）
- componentDidMount() DOM渲染完成后 1发送网络请求 2DOM操作

更新时

- this.setState()
- this.forceUpdate()
- 组件接收的props发生变化
- 以上都会触发render()更新
componentDidUpdate() render()后 1发送网络请求 2DOM操作

卸载时

- componentWillUNmount() 执行清理 如定时器

React 中 key 的重要性是什么？

key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 React 优化渲染。

这些 key 必须是唯一的数字或字符串，React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。

React hook

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
Hook 是什么？ Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。
什么时候我会用 Hook？ 如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以在现有的函数组件中使用 Hook。
 
在函数组件中，我们没有 this，所以我们不能分配或读取 this.state。我们直接在组件中调用 useState Hook
 
 
useState 是允许你在 React 函数组件中添加 state 的 Hook。
Effect Hook 可以让你在函数组件中执行副作用操作数据获取，设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。
 
useEffect 做了什么？ 通过使用这个 Hook，你可以告诉 React 组件需要在渲染后执行某些操作。
React 会保存你传递的函数（我们将它称之为 “effect”），并且在执行 DOM 更新之后调用它。

最新文章

  1. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（13）-系统日志和异常的处理③
  2. test imetro
  3. 基于OWin的Web服务器Katana发布版本3
  4. Sublime Text3 (转) 配置 以及快捷键配置
  5. ubuntu --- shortcut key
  6. Wireshark基本介绍和学习TCP三次握手(转)
  7. c++异常详解
  8. 再次记录老K站点的工作策略
  9. ElasticSearch基础(4)-索引
  10. [Tensorflow] Object Detection API - retrain mobileNet
  11. iOS - 身份证判断正则加算法
  12. Keras人工神经网络多分类（SGD）
  13. C、C++打包成.dll .so .a 给Unity使用
  14. HTML5播放器 MediaElement.js 使用方法
  15. maven中的groupId和artifactId到底指的是什么
  16. YII插件
  17. js urlencode
  18. OpenGl中的Nurbs B样条曲面绘制
  19. 来一波Linux中查看cpu、磁盘、内存、网络的命令
  20. Scrum立会报告+燃尽图（十一月二十七日总第三十五次）：β阶段最后完善

热门文章

  1. transformers 之Trainer对应的数据加载
  2. css实现水波纹
  3. CloudFlare Workers部署Pixiv图片反代
  4. 阿里云服务器 jdk1.8 安装配置
  5. 通过expected_conditions判断网页元素是否存在
  6. git 修改commit 备注
  7. zzul1073_Java
  8. 搭建 springboot 应用
  9. JavaScript基础知识整理（引用类型-Function）
  10. typora文件中不显示公式