用着Vue，偷学React，第一节用着Vue，偷学React，第一节美好的一天开始了, 请大家努力工作, 迎娶白富美,

废话不多说创建一个项目并打开所谓的index.tsx

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')
);
reportWebVitals();

❝

前几行代码我就不用多说了引入react，react-dom ，index.css App 嗯看来和Vue差不多嗯？ reportWebVitals 是什么？「报告重要信息」？看一下是做什么的上才艺！

❞

import { ReportHandler } from 'web-vitals';

export default reportWebVitals;

哦，原来是引入了**「web-vitals」**前端性能检测工具，好的明白了接着往下看

<React.StrictMode>

这个看单词 react strict mode 严格模式感觉懂了这里面的东西全部变成严格模式不我没懂走看官网

❝

「StrictMode」 是一个用来突出显示应用程序中潜在问题的工具。与 Fragment 一样，StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。

❞

严格模式检查仅在开发模式下运行；它们不会影响生产构建
识别不安全的生命周期
关于使用过时字符串 ref API 的警告
关于使用废弃的 findDOMNode 方法的警告
检测意外的副作用
检测过时的 context API 好了看完有点明白了不过又引入一个新问题 「与 Fragment 一样」什么一样真的一样吗吓得我立马翻翻「Fragment」

Fragment

❝

减少不必要嵌套的组件在不额外创建DOM元素的情况下，让render()返回多个元素。简写<></>

❞

如果不用会怎么样呢，换句话说我们从面试的角度去看使用**「React.Fragment」**有哪些好处？如果你回答减少不必要嵌套的组件你感觉能得几分呢!

首先我们理解什么是不必要组件如果子组件要返回**「标签td」**父组件才能正常显示这时候就表现出来用处了。回到正题如果是我回答这个问题我会这样说 「减少不要嵌套的组件（这句话肯定要说）其实我们在16版本中是将他们放入数组中，而不是将子元素包裹在DOM元素中」

render() {
 return [
  "Some text.",
  <h2 key="heading-1">A heading</h2>,
  "More text.",
  <h2 key="heading-2">Another heading</h2>,
  "Even more text."
 ];
}

「对比你平时写的jsx，看着感觉是不是特别不爽」

数组中的子项必须用逗号分隔。
数组中的子项必须有一个键来防止 React 的键警告。
字符串必须用引号括起来。

「然而最16之前，更是将子元素包裹在一个额外的元素中，通常用A div 或者span；直到现在出现了这位解决了这些问题我们不仅知道他是这个意思还知道为什么去使用它。另外它呢就像是一个片段」

在看一下另一个用法

 <dl>
      {props.items.map(item => (
      没有key 将会触发一个key警告
        <Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </Fragment>
      ))}
    </dl>

像不像给每个相同物品一个编号,好了大致看完了接下来开始进行下一步学习

前端是最棒的

如有错误请指正

美好的一天开始了,

请大家努力工作,

迎娶白富美,

嫁个高富帅,

踏上人生巅峰！

用着Vue，偷学React，第一节

废话不多说 创建一个项目 并打开所谓的index.tsx

Fragment

废话不多说创建一个项目并打开所谓的index.tsx