zoukankan      html  css  js  c++  java
  • react学习笔记1--基础知识

    什么是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

    参考地址

  • 相关阅读:
    element-ui Message组件源码分析整理笔记(八)
    element-ui Pagination组件源码分析整理笔记(七)
    element-ui Tag、Dialog组件源码分析整理笔记(五)
    element-ui Progress、Badge、Alert组件源码分析整理笔记(四)
    element-ui inputNumber、Card 、Breadcrumb组件源码分析整理笔记(三)
    element-ui switch组件源码分析整理笔记(二)
    element-ui button组件 radio组件源码分析整理笔记(一)
    vue项目中引入bootstrap
    微信获取openId
    react各种表单的写法
  • 原文地址:https://www.cnblogs.com/yldf55/p/5161057.html
Copyright © 2011-2022 走看看