如何用js实现一个简单的react？_AngularJS和ReactJS分别是干什么的呢？

1、 如何用js实现一个简单的react？

谢谢邀请！

写一个react应用，可以分为以下几步：

1、写组件

组件分为类组件和函数式组件，类组件需要继承react的Component基类，有自己的生命周期钩子函数

2、状态管理

数据由props传入，类组件内部可以通过state控制组件自身的状态变化（setState）

3、调用入口函数

ReactDOM.render

4、通过webpack（babel处理jsx）打包编译即可生成react应用

在react中有一个虚拟dom的概念，那么虚拟dom是什么呢？其实它是一个对象，如下图：

它就是对jsx的描述，jsx并不能当做真正的dom插入页面中，需要做进一步的转化，babel会把jsx转化为一堆由createElement组成的执行函数，如下：

再由createElement返回的数据拼装成上面所说的虚拟dom。

那么要实现一个react，需要实现createElement、render和Component三个部分！

1、createElement函数

第一个参数type是类型，可能是类、函数、dom的tagName，第二个参数props就是定义在jsx中标签的属性包括自定义属性和自定义事件

2、render

render索要完成的事情就是将虚拟dom渲染成真实的dom，并且可以更新！办法就是遍历这个虚拟dom树。

• 遇见dom标签，生成dom节点，从props中拿出属性和事件（事件的key都是以on开头），完成绑定，append进父元素中。
  

• 遇见类组件，直接new出一个实例，运行实例的render方法，生成组件的虚拟dom，展开递归，遇见dom标签就加入父元素中，在这个阶段是可以运行生命周期中各个钩子函数的。

• 遇见函数，直接执行，生成组件的虚拟dom，展开递归，遇见dom标签就加入父元素中。

3、diff（插入一点）

如何做到diff呢？其实就是在内存中保留上一次的虚拟dom树，待生成新的虚拟dom树后，就可以逐层做diff，这就是为什么在写react的state时候需要生成新的对象断开引用，为的就是不能影响diff。react是在属性、类型等改变时有一套规则，diff规则可以自己定，不一定要沿用react的。

之前出去面试，别人问我如果有一千个一万个节点如何对比，递归下去依然性能很差，被问的垭口无语！读者可以自己思考一下！

4、Component

这个基类比较简单，就是实现一个setSate方法，在方法中调用更新逻辑。

综上，实现这个几个功能基本就能实现一个react了，不过还是比较复杂的，特别是递归那块！

喜欢我的回答就关注我吧，有问题可以发表评论，我们一起学习，共同成长！

2、 AngularJS和ReactJS分别是干什么的呢？

AngularJS：

AngularJS简介：http://codingdict.com/article/7606

AngularJS是一个JavaScript框架。它可通过标签添加到HTML页面。AngularJS通过指令扩展了HTML，且通过表达式绑定数据到HTML。

AngularJS是一个JavaScript框架

AngularJS是一个JavaScript框架。它是一个以JavaScript编写的库。AngularJS是以一个JavaScript文件形式发布的，可通过script标签添加到网页中：

Note我们建议把脚本放在元素的底部。这会提高网页加载速度，因为HTML加载不受制于脚本加载。

AngularJS扩展了HTML

AngularJS通过ng-directives扩展了HTML。ng-app指令定义一个AngularJS应用程序。ng-model指令把元素值（比如输入域的值）绑定到应用程序。ng-bind指令把应用程序数据绑定到HTML视图。

ReactJS：

ReactJS是用于构建可重用UI组件的JavaScript库。根据React官方文档，以下是定义-

React是一个用于构建可组合用户界面的库。它鼓励创建可重用的UI组件，这些组件会呈现随时间变化的数据。许多人在MVC中使用React作为V.将您的DOM中的DOM抽象化，提供更简单的编程模型和更好的性能。React也可以使用Node在服务器上呈现，并且它可以使用ReactNative为本机应用程序供电。React实现了单向无效数据流，与传统的数据绑定相比，这样可以减少样板并更容易推理。

React功能：来源http://codingdict.com/article/8359

• JSX-JSX是JavaScript语法扩展。在React开发中没有必要使用JSX，但推荐使用。

• 组件-React是关于组件的。你需要把所有东西都看作一个组件。这将有助于您在处理大型项目时维护代码。

• 单向数据流和Flux-React实现单向数据流，可以轻松推理您的应用程序。Flux是一种有助于保持数据单向性的模式。

• 许可-React根据FacebookInc.许可。文档根据CCBY4.0许可。

反应优势

• 使用作为JavaScript对象的虚拟DOM。这将提高应用程序性能，因为JavaScript虚拟DOM比常规DOM更快。

• 可以在客户端和服务器端以及其他框架中使用。

• 组件和数据模式提高了可读性，这有助于维护更大的应用程序。

3、 react.js有哪些设计缺陷？

比vue好多了

4、 学了一段时间react，感觉有点难理解，是要继续学习React.js还是系统地学习JS？

React.js：预备知识http://codingdict.com/article/8358

如果你想使用ReactJS，你需要有扎实的JavaScript，HTML5和CSS知识。即使ReactJS不使用HTML，JSX也是如此，因此您的HTML知识将会非常有用。我们将在下一章中更详细地解释这一点。我们还将使用EcmaScript2015语法，因此这方面的任何知识都可能有所帮助。

5、 react算前端框架吗？为什么官方描述为A JavaScript library？

React它就是一个前端框架，是一个用于构建用户界面的JavaScript库，官方描述的AJavaScriptlibrary意思是"一个JavaScript库"，就是我说的这个意思，它并没有什么冲突。