前端学习之初识React框架

最新推荐文章于 2024-06-11 00:00:00 发布

写bug的开发

最新推荐文章于 2024-06-11 00:00:00 发布

阅读量422

点赞数

分类专栏：学习笔记文章标签：前端 React 框架

本文链接：https://blog.csdn.net/JulyMC/article/details/97324644

版权

3 篇文章 0 订阅

订阅专栏

一、了解React

1、React是facebook在2013年开园在GitHub上的JavaScript库

2、狭义讲，React是一个用来构建UI的JavaScript库；广义讲，React不仅仅是JavaScript框架本身，更是一套完整的前端开发生态体系；

3、React不是一个MVC框架，仅仅是视图层（V）的库。

1、React的理念归结为一个公式：UI = render（data）；

2、用户看到的UI界面，是一个函数——render的执行结果，只接受数据——data作为参数，这是一个纯函数，即输出只依赖于输入的函数，两次函数的调用如果输入相同，那么输出也绝对相同。如此一来，最终的用户界面，在render函数确定的情况下完全取决于输入数据。

（1）虚拟DOM是React的基石，是React高性能的支撑；

（2）React将DOM抽象为虚拟DOM，虚拟DOM其实就是一个对象来描述DOM；

（3）React通过对比虚拟DOM更新前和更新后的差异，最终只把变化的部分重新渲染，提高渲染的效率；

DOM & JavaScript

Virtual DOM & DOM

Virtual DOM对真实DOM的一种模拟，相对于直接操作真实的DOM结构，我们构建一颗虚拟的树，将各种数据和操作直接应用在这棵虚拟的树上，然后再将对虚拟树上的修改应用到真实的DOM结构上
公式上可以理解为：Virtual DOM => DOM

Diff算法和调和机制

Virtual DOM + render

组件的声明方式

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>
}

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

React组件的数据分为两种——props和state
React的渲染结果是由组件属性和状态共同决定的，状态和属性的区别是：状态维护在组件内部（私有），属性是由外部控制（公有）。它们任何一个的改变都会引发组件的重新渲染
组件修改组件自身状态state，需要调用setState方法
React组件必须保护它们的props不被更改