react学习笔记1--基础知识

时间:2023-12-12 23:14:20

什么是react

  • A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES【React是一个用于构建用户界面的JavaScript库。】
  • React之所以快,是因为它不直接操作DOM。React将DOM结构存储在内存中,然后同render()的返回内容进行比较,计算出需要改动的地方,最后才反映到DOM中。【为什么用react,它为什么快】
  • 个人感觉: react通过虚拟DOM解决的数据频繁变化造成的DOM节点的频繁渲染。所以,适用于那些数据更新比较快的,【增删改查】频繁的页面;

react的核心库

  • react.js 是 React 的核心库,
  • react-dom.js 是提供与 DOM 相关的功能,
  • JSXTransformer.js 的作用是将 JSX 语法转为 JavaScript 语法,这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。或者 直接node编辑完成

什么是JSX 的语法

  • 它允许 HTML 与 JavaScript 的混写
  • 在JSX语法中,遇到HTML标签(以<开头)就用HTML规则解析,遇到代码块(以{开头)就用JavaScript规则解析。
  • JSX还允许在模板中直接插入JavaScript变量,变量是数组就展开数组成员。

组件

  • React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类
  • 注意,组件类的第一个字母必须大写,否则会报错,比如HelloMessage不能写成helloMessage。

  • 另外,组件类只能包含一个顶层标签,否则也会报错。

  • this.props && this.props
  • this.props.children的值有三种可能:如果当前组件没有子节点,它就是undefined;如果有一个子节点,数据类型是 object ;如果有多个子节点,数据类型就是 array
  • React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点,而不用担心 this.props.children 的数据类型是 undefined 还是 object

组件渲染原理

  • 组件并不是真实的DOM节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的DOM 。
  • 根据React的设计,所有的DOM变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做DOM diff,它可以极大提高网页的性能表现。
  • 有时需要从组件获取真实 DOM 的节点,这时就要用到 ref 属性由于 this.refs.[refName] 属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。

组件渲染状态

  • 组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI
  • this.props 和 this.state 都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性。

组件的生命周期

  • 组件的生命周期分成三个状态:
  • Mounting:已插入真实 DOM
  • Updating:正在被重新渲染
  • Unmounting:已移出真实 DOM

参考地址