React入门学习笔记1

前言

React是一个用来动态构0建用户界面的JavaScript库（只关注于视图）。它可以帮助开发人员轻松地创建复杂的交互式界面，以及管理与用户交互的状态。相比于其他的JavaScript框架，React采用了一种不同的编程模型，称为“组件化编程模型”。这种模型使得组件具有高度的可重用性和可维护性，从而使得开发人员可以更加高效地开发出高质量的应用程序。在本笔记中，我将进行一步步的React学习，包括它的基本概念和用法。

React与Vue的区别

首先，我已经学习完了Vue并做了几个项目，在学习React之前，先了解了一下React与Vue的区别：

1. 数据绑定方式不同：Vue使用双向数据绑定，React使用单向数据流。
2. 组件化实现方式不同：Vue使用模板语法实现组件化，React使用JSX语法实现组件化。
3. 生命周期管理方式不同：Vue提供beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed等生命周期函数；React提供componentWillMount、componentDidMount、componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、componentDidUpdate、componentWillUnmount等生命周期函数。
4. 数据管理方式不同：Vue提供Vuex进行数据管理，React则需要使用像Redux这样的库来管理数据。
5. 性能优化方式不同：Vue使用虚拟DOM和基于依赖追踪的渲染优化，React也使用虚拟DOM和shouldComponentUpdate的优化方式。
6. 模板渲染方式不同：Vue使用模板编译，React使用JSX语法。
7. 项目构建方式不同：Vue提供CLI工具Vue-CLI，React提供Create-React-App。

---

React的特点

1.采用组件化模式、声明式编码，提高开发效率及组件复用率。

2.在React Native中可以使用React语法进行移动端开发。

3.使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。
 

---

前置知识

学习react有一定的前置知识要求，相对于vue来说没有那么好入门

• 判断this的指向
• class(类）
• ES6语法规范
• npm包管理器
• 原型、原型链
• 数组常用方法
• 模块化

---

HELLO REACT

导包时，必须先导入react核心库，再导入react周边库和babel，顺序不能错！

jsx语法的script中必须注明babel

且jsx语法中的虚拟DOM内容不要加引号

易错点：

• 忘记准备“容器”，无DOM结点怎么往里面放呢
• 虚拟DOM内容加了引号

如果要加两个虚拟DOM，不能这样子写，框起来的语句不是追加动作而是覆盖动作。 

为什么react要求使用jsx而不能使用js？

首先看实现以下效果的jsx和js方法：

jsx方法：

js方法

 如果说要在h1里嵌套一个span的话，更明显的区别就出来了

jsx：

js：

 而babel的机制就是把jsx转换成了js写法，方便了开发者。

 虚拟dom和真实dom

 虚拟dom和真实dom的打印结果分别是：

 直接用console.log打印出来无法看到dom的属性

所以我们要加一个debugger进来来查看

 

 所以能得出以下结论：