个人学习笔记 ReactJS part1

最新推荐文章于 2024-07-17 23:03:50 发布

原创最新推荐文章于 2024-07-17 23:03:50 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端开发

个人学习笔记同时被 2 个专栏收录

6 篇文章

订阅专栏

react

1 篇文章

订阅专栏

本文介绍了React框架的核心概念，包括其背景、原理、组件化思想及其关键特性。详细解释了虚拟DOM如何提高性能，并探讨了组件的生命周期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React的背景：
    在前端开发的过程中，我们通常会进行频繁或者复杂的DOM操作，这些操作往往是引起性能瓶颈的原因，因此如何去优化页面的性能是前端开发的技术指标之一，而React恰好可以满足我们的需要；
React的原理：
    React引入了虚拟DOM的机制，即在浏览器端用JS实现了一套DOM API，当我们用React进行开发的时候所有的DOM构造都是通过虚拟DOM进行构造。只要数据发生变化，React的虚拟DOM都会重新虚拟构造整个DOM树，然后将后来构造的DOM树与之前构造的DOM树进行比较，把发生了变化的那一部分DOM结构更新到浏览器的DOM树上。在整个过程中，每一次的数据变化都需要对整个DOM树进行重新构造，但是这些过程发生虚拟DOM中，因为虚拟DOM是内存数据，而且浏览器DOM实际操作的是diff部分，所以性能得到极大的提高。
Reactde的核心思想（封装组件）：
    React不仅给我们带来了简单的UI逻辑，而且也给我们提供了组件化的思想，它认为：
    1.组件是可以相互组合的；
    2.组件是可以重复利用的；
    3.组件是个体，可以单独进行维护的。
React的概念;
    1.组件化;
        1.1、react允许将代码封装成组件，然后像插入普通标签一样，在网页中插入这个组件，例如:React.createClass用来生成一个组件类;
        1.2、所有的组件都必须有自己的render方法，用于输出组件;
        1.3、所有组件类的第一个字母必须大写;
        1.4、组件类只能包含一个顶层标签;
        1.5、组件的用法与原生html一致，可以任意加入属性，而这些属性可以从this.props中读取;(this.props对象的属性和组件的属性一一对应，但是有一个例外，就是this.props.children,当它在没有子节点的时候是undefined;当它在只有一个子节点的时候是Object;当它有多个子节点的时候是Array;而react提供React.Children方法来React.Children.map来遍历子节点，不必考虑上述情况)
    2.jsx:即javascriptXML,只是对js的拓展语言，由于jsx在定义类似HTML这种树形结构时十分简单明了，所有在使用react建议使用jsx。
        2.1、JSX的基本语法规则：遇到HTML标签('<'),就用HTML来解析，遇到('{')就用js来解析;
        2.2、允许使用HTML语法来创建对象，如a标签,React.render('a',{href:'http://www.xxx.com'},'hello react');=><a href='http://www.xxx.com'>hello react</a>;
        2.3、允许在jsx中使用Javascript表达式，表达式写在{}中;
        2.4、给组件添加class属性时，要用className;
        2.5、给组件添加样式时，要用style={{width:this.state.width}};
    3.与jquery的关系
        react不依赖于jquery，也可以在其中引入jquery，但是在react.render里面获取目标元素的时候我们必须要用原生js。
    4.react中的this.state: 
        4.1、设置getInitialState方法: 这个方法在组件初始化的执行，而且必须返回null或者一个Object; 
        4.2、绑定this.state.initialState: 通过this.state来对元素进行属性值的绑定,表达式为: attr={this.state.initialState};
        4.3、设置this.state: 通过自定义方法来设置一个或者更改一个state的值,例如   handleState: function(){
this.setState(initialSate: !this.state.initialState);                       
        }
        作用: 我们可以通过对自定义状态值来对组件进行操作，当状态值发生改变的时候，react自动调用其中的this.render方法重新渲染整个组件，然后进行执行diff算法，把需要更新的内容进行渲染。
    5、组件生命周期:
        5.1、Mounting: 已经插入真实的DOM树;
        5.2、Updating: 正在被重新渲染;
        5.3、Unmounting: 已经插入真实的DOM树;