React的起源和发展

Posted 2023-03-14

参考技术A React： 用于构建用户界面的 javascript 库

React起源：Facebook公司出品，13年面世，14年国内引入，同时github受到大量的关注，国内各大公司都会分出专门的人力物力去研究使用。

React的出发点：基于html的前端界面开发正变得越来越复杂，其本质问题基本都可以归结于如何将来自于服务器端或者用户输入的动态数据高效的反映到复杂的用户界面上。而来自于Facebook的React框架正是完全面向此问题的一个解决方案，按官网描述，其出发点是：用于开发数据不断变化的大型应用程序（Building large applications with data that changes over time）。相比传统型的前端开发，React开辟了一个相当另类的途径，实现了前端界面的高性能高效率开发。

React的概念知识：

适用的项目：数据不断变化的大型应用程序，优点：高性能高效率；

React是一个轻量级试图层前端js框架；

React 特点和优势：

1.JSX语法糖

全称为javascript xml，作用是帮助React构建虚拟dom结构，不使用jsx的话，需要使用React.createElement(tagName,options:(id,className),contents..)

使用jsx语法会使react开发更为简单，xml指的只是借鉴了一些XML的语法，标签必须闭合，最外层必须有节点包裹

jsx语法需要编译成React.createElement

2.虚拟dom

React会在js中根据组件的虚拟dom结构来构建出完整的一套虚拟DOMapi，每一次的数据变化React都会重新构建一套完整的虚拟DOM和上一次的虚拟DOM利用DIFF算法计算出不同的地方，重新渲染，因为所有的操作都是在虚拟DOM中，很大程度避免了操作真实DOM，所以性能极高，且React还能将两次连续的数据变化合并到一起

注意：react如何创建虚拟dom，diff算法如何进行对比

3.单向数据流

其实reactjs的核心内容就是数据绑定，所谓数据绑定指的是只要将一些服务端的数据和前端页面绑定好，开发者只关注实现业务就行了

单向数据流：只要服务端数据发生变动，前端数据也变动

4.组件化开发

React的组件化开发是体现其高效率的地方

组件其实就是html，js，css，image等部分的聚合体，页面结构中独立的功能部分

组件应该拥有的性质：

（1）可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件； （2）可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个UI场景； （3）可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护 （4）可测试（Testable）：因为每个组件都是独立的，那么对于各个组件分别测试显然要比对于整个UI进行测试容易的多。

划分组件的原则： 复用率高的，逻辑较为独立的

5. React核心对象

react.js中React,react-dom.js中有一个ReactDOM

6 React的样式和事件

R推荐使用行内样式，这样就可以更大程度保护组件的独立性，事件也需要通过行内设置的方法来设置

7 React组件的props和state

R数据的挂载主要依靠props和state；1.属性（props）    在组件外部传入，或者内部设置，组件内部通过this.props获得2.状态（state）    在组件内部设置或者更改，组件内部通过this.state获得相似点：都是纯js对象，都会触发render更新，都具有确定性（状态/属性相同，结果相同）不同点：    属性能从父组件获取，状态不能            属性可以由父组件修改，状态不能            属性能在内部设置默认值 ，状态也可以            属性不在组件内部修改  ，状态要改            属性能设置子组件初始值  ，状态不可以            属性可以修改子组件的值，状态不可以状态只和自己相关，由自己维护属性不要自己修改，可以从父组件获取，也可以给子组件设置组件在运行时自己需要修改的数据其实就是状态而已

8 ref

组件可以在renderdom结构中通过ref对dom、子组件进行标记，在组件里通过this.refs来获取，就可以操作真实DOM和调用子组件的属性方法

9.生命周期

10.组件通信