react入门 第一篇

项目的搭建

一开始就选择用最简单的create-react-app来搭建项目  

输入 npm i -g create-react-app 下载脚手架

然后通过指令  create-react-app [项目名称]  创建项目

之后生成的代码就是很标准的node项目文件结构， 稍微有点基础的看看package就懂了 (实在不懂就记住  去把vue项目搭建复习一遍)

 

 

这篇的主要内容就是生成的项目文件中的启动文件中出现的东西

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>,

  document.getElementById('root')

);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

react

1.React.StrictMode
   这是我看到这段代码唯一发现的与react对象有直接关系的属性,简单的查询了一下，和直接单词翻译的意思差不多， 就是严格模式，有点像H5的头部严格标识一样， 会自动检测被这个标签所包含的组件内部的api 代码逻辑严谨性的检测，但是如果不被这个标签包裹的外部组件是不会受到检测的(简单来说就是只对这个标签的子组件有效)

react-dom

 1.看到这个家伙的时候  对于第一次接触react的我一脸懵逼 这又是撒，为什么还要分一个react-dom出来，没必要为了一个渲染dom操作的对象特意分一个吧，然后查了一下资料，发现，原来是因为react的更新，要开始兼容不一样的各种平台，对于dom的渲染也要开始分化好，除开react-dom以外还有用于移动端dom渲染的 react-native。仔细想想，确实有分开的必要。

2.整个文件能看到的使用也只有一个 ReactDOM.render()，一看到这个我就觉得眼熟，这家伙，不就是vue的虚拟dom么,至少看起来很相似，jsx一样的结构，是很多面向对象框架的通用dom模板，所以这里相识也没什么关系。(不会吧 不会吧 不会还有人不知道虚拟dom吧！~~)

3.扩展内容 jsx 和 虚拟dom
首先要声明一下 jsx不等于 虚拟dom  这2中东西是完全不一样的，jsx是一种表达形式，是一种可以转化为虚拟dom的表达式。 可以转化为虚拟dom的表达方式有很多种，只是react的jsx很棒，这点vue表示没有人比我更懂jsx了！react:你放屁，明明是我发明的！~~  
加入没有jsx那么 react要如何表达虚拟dom呢？
ReactDOM.render（
　　React.createElement("div",{ class: "createClass", style: "color: #ffffff" }, [ 
　　　　React.createElement("div", {class: "createChildClass"}, []),
　　　　React.createElement("div", {class: "createChildClass"}, []),
　　])
）
看到了么，是不是看着就头疼！~~

4. jsx的使用依赖
jsx是一种有babel进行翻译解释的表达式，所以依赖于babelJs, 记得引入它呀，不然报错了可别怪我没说明！~~

5.为什么要使用虚拟dom(这里只是随便扯扯不然就说不完了)
拜托，都2020年了 别再说这种问题了， 传统的jq框架一类的dom操作库的缺点都快被戳爆了，虚拟dom就是为了解决这个动态渲染dom树导致文件流刷新慢多次刷新的问题而出现的，将dom操作在内存中进行，从而减少tree刷新率！~~~

reportWebVitals （关于这个内容我会特别出一期来学习一下）

 1.web-vitals是什么
我去 我这一查不得了，这个是由谷歌提出来的一种信息结构，用来表示网站信息，然后游览器根据这个信息作出相应的优化策略，从而提供更好地用户体验.

核心网络生命特征
累积布局偏移(CLS)
首次输入延迟 (FID)
最大的内容绘制 (LCP)
其他网络重要信息
首次内容绘制 (FCP)
首字节时间 (TTFB)