react 从入门到实践之基础总结一

一、为什么要学习React

  1. 前言,选择任何一门语言学习都是有时间和金钱的成本的,那么 React 值得学习。
  2. 学习的必要性,如下所示:
  • 使用组件化开发方式,符合现代 Web 开发的趋势; 企业前后端项目分离,唯有 React 是首选;
  • 技术成熟,社区完善,配件齐全,适用于大型 Web 项目(生态系统健全);
  • Facebook 专门的团队维护,技术支持可靠;
  • ReactNative - Learn once, write anywhere: Build mobile apps with React
  • 使用方式简单,性能非常高,支持服务端渲染;
  • React 使用前端技术非常全面,有利于整体提高技术水平;此外,有利于求职和晋升,有利于参与潜力大的项目;

二、React快速入门

  1. 概念介绍,如下所示:
  • React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设他们自己的 Instagram 的网站。
  • 做出来以后,发现这套东西很好用,在 2013年5月 开源了。目前已经成为前端的三大主流框架。
  1. React 是什么,如下所示:
  • React 是用于构建用户界面的 JavaScript 库,围绕 React 的技术栈主要包括:React, redux, react-redux, react-router, .....
  • React 官网:https://reactjs.org/React 中文:https://react.docschina.org/
  1. React 具备的特点,如下所示:
  • 使用 JSX 语法创建组件,实现组件化开发,为函数式的 UI 编程方式打开了大门;
  • 性能高:通过 diff 算法 和 虚拟 DOM 实现视图的高效渲染和更新;
  • 声明式、组件化、一次学习,随处编写;
  1. React 核心,虚拟 DOMDiff 算法。

  2. 对于虚拟 DOM,如下所示:

  • 虚拟 DOMReactDOM 抽象为虚拟 DOM,虚拟 DOM 其实就是用一个对象来描述 DOM,通过对比前后两个对象的差异,最终只把变化的部分重新渲染,提高渲染的效率;
  • 为什么用虚拟 DOM ?当 DOM 发生更改时需要遍历 DOM 对象的属性, 而原生 DOM 可遍历属性多达 200 多个个, 而且大部分属性与渲染无关, 导致更新页面代价太大;
  • 虚拟 DOM 的处理方式,如下所示:
    • 1)用 JS 对象结构表示 DOM 树的结构,然后用这个树构建一个真正的 DOM 树,插到文档当中。
    • 2)当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异。
    • 3) 把记录的差异应用到步骤1所构建的真正的 DOM 树上,视图就更新了。
  1. 对于 Diff 算法,如下所示:
  • 最小化页面重绘;
  • 当我们使用 Reactrender() 函数创建了一棵 React 元素树,在下一个 state 或者 props 更新的时候,render() 函数将会创建一棵新的 React 元素树;
  • React 将对比这两棵树的不同之处,计算出如何高效的更新 UI(只更新变化的地方),此处所采用的算法就是 diff 算法;

三、React初体验

  1. 对于 React 的初体验,代码如下所示:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>
<body>
  <div id="app">div> 

  <script src="../js/react.development.js">script>
  <script src="../js/react-dom.development.js">script>
  <script src="../js/babel.min.js">script>
  <script type="text/html">
    // 1.获取页面真实的容器元素
    const containerDiv = document.getElementById('app')
    // 2. jsx语法创建虚拟DOM对象
    const vDom = <div>React</div>
    // 3. 将虚拟DOM渲染到页面元素上去
    ReactDom.render(vDom, containerDiv)
  script>
  <script type="text/babel">
    const vDom = <div>React</div>
    ReactDom.render(vDom, document.getElementById('app'))
  script>
body>
html>
  1. JSX 语法入门,往容器中插入一个 span 标签, class 为: "react", 内容为: "React"。对此,有两种实现方式,通过典型 js 方式和 JSX 方式,代码如下所示:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>
<body>
  <div id="app1">div>
  <div id="app2">div>
  <script src="../js/react.development.js">script>
  <script src="../js/react-dom.development.js">script>
  <script src="../js/babel.min.js">script>

  <script>
    // 通过典型js方式
    // 1. 创建变量
    let myClass = 'react'
    let myContent = 'React'
    // 2. 创建DOM
    const vDom = React.createElement('span', {
      className: myClass}, myContent)
    // 3. 将虚拟DOM渲染到页面元素上去
    ReactDom.render(vDom, document.getElementById('app1'))
  script>

  <script type="text/babel">
    // JSX方式
    const vDom1 = <span className={
      myClass.toUpperCase()}>{
      myContent}</span>
    ReactDom.render(vDom1, document.getElementById('app2'))
  script>
body>
html>
  1. 对于插入标签的总结,如下所示:
  • JSX 只是高级语法糖, 最终执行时还是会被转成原生 js, 通过 babel 等方式;
  • 更加语义化, 更加直观, 代码可读性更高;
  • 性能相对原生方式更加好一些
  1. 对于 JSX 常见的界面操作方式,如下所示:
  • 多重标签嵌套,代码如下:
 <script type="text/html">
    ReactDom.render(
      <div>
        <h2>多重标签嵌套</h2>
        <p>测试</p>
      </div>
    , document.getElementById('app'))
  </script>
  • js中的变量, 表达式要写在 {} 内,代码如下:
 <script type="text/html">
    const str = 'react'
    ReactDom.render(
      <div>
        <span>{
     str}</span>
        <p>10+2*4={
     10+2*4}</p>
      </div>
    , document.getElementById('app'))
  </script>
  • 内联样式通过对象方式引入,代码如下:
 <script type="text/html">
    const myStyle = {
     
      backgroundColor: 'purple',
      color: 'yellow',
      fontSize: 30
    }
    ReactDom.render(
      <div>
        <h2>颜色</h2>
        <div style={
     myStyle}>测试</div>
      </div>
    , document.getElementById('app'))
  </script>
  • 数组遍历,代码如下:
 <script type="text/html">
    const dataArr = [
        {
     name: '周杰伦', age: 38},
        {
     name: '谢霆锋', age: 40},
        {
     name: '刘德华', age: 48}
    ]
    const vDom = (
      <ul>
        {
     
          dataArr.map((data, index) => 
            <li key={
     index}>{
     index+1} --- {
     data.name}:{
     data.age}</li>
          )
        }
      </ul>
    )

    ReactDom.render(vDom, document.getElementById('app'))
  </script>
  1. 对于 JSX 常见的界面操作方式,总结如下所示:
  • JSX 中添加属性时,使用 className 代替 class , 像 label 中的 for 属性,使用 htmlFor 代替;
  • JSX 创建 DOM 的时候,所有的节点,必须有唯一的根元素进行包裹;
  • JSX 语法中,标签必须成对出现,如果是单标签,则必须自闭合;
  • JSX 中可以直接使用 JS 代码,直接在 JSX 中通过 {} 中间写 JS 代码即可;
  • JSX 中只能使用表达式,不能出现语句;
  • JSX 中注释语法:{/* 中间是注释的内容 */}

你可能感兴趣的:(React,react,从入门到实践,基础总结一)