02React学习记录——前言-优快云博客

本文链接：https://blog.youkuaiyun.com/JUNSAN_jason/article/details/140484907

01Hello Word

先从最简单的script标签引入 React需要的 Js脚本文件

1、react.development.js （react核心库，只要使用react就要引入）

https://unpkg.com/react@18.0.0/umd/react.development.js

2、react-dom.development.js （react的dom包，使用react开发web应用时必须引入）

https://unpkg.com/react-dom@18.0.0/umd/react-dom.development.js

如何通过React创建一个项目呢？

主要就是利用到三个API，分别是

1、 React.createElement()

2、ReactDOM.creatRoot()

3、root.render(div)

    //需要创建React元素，通过React.creatElement()创建
    // 参数分别是 1、元素名，就和正常情况下的元素一样，想要div就写div，想要span就写span
            // 2、元素中的属性，在{}可以写 id class等属性
            // 3、元素中的子元素（内容）

    const div = React.createElement('div',{},'我是React创建的div')

    //获取根元素对应的React元素
    //通过ReactDOM.creatRoot()创建，需要一个DOM元素作为参数
    const root = ReactDOM.createRoot(document.getElementById("root"))

    //最后用root.render()将React元素div 渲染到页面中
    root.render(div)

注意：

React.createElement()
React元素一旦创建就不能修改，React是通过新创建的元素进行替换的。
React会使用DOM差分算法------会对比每次渲染的元素，如果有发生了变化的元素就重新渲染，否则不会变化。

02引入JSX 及注意事项

1、引入babel（使用JSX）

https://unpkg.com/babel-standalone@6/babel.min.js

可以正常像HTML标签那样声明式编程，而不是像使用React.createElement()那样命令式编程，可以方便编码过程。

使用JSX之后会自动生成JS代码，最终都会生成以调用React.createElement() 创建元素的代码。

<div id="root"></div>
<script type="text/babel">
    const div = <div>"haahah"</div>
    const root = ReactDOM.createRoot(document.getElementById("root"))
    root.render(div)
</script>

对比上面使用React.createElement() 要方便很多，但最终都会渲染成 React.createElement()

JSX注意事项：

JSX不是字符串，不需要加引号。
JSX有且只有一个根标签。
可以使用{ }插入JS表达式。（表达式：有返回值的语句。JSX也是表达式）
在JSX中，属性可以直接写在标签中。（class使用className，style必须用对象{ }设置，而不是" " ）

style里的第一个括号是表达式，第二个表示对象

03 渲染列表

const data = ["tom", "jack", "rose"]
    //const list = <ul>{data}</ul>
    //console.log() -----> tom jack rose

    // 想要在<ul>{arr}</ul> 渲染成列表的话，数组应该呈现成这样 ['<li>tom</li>','<li>jack</li>','<li>rose</li>']
    
    const arr = data.map((item) => <li>{item}</li>)

    const list = <ul>{arr}</ul>

    const root = ReactDOM.createRoot(document.getElementById("root"))
    root.render(list)

04 理解虚拟DOM

在React中我们操作的元素是 React元素，不是真正的原生DOM元素。

所以在React中，我们是通过操作虚拟DOM 将 React元素 和 原生DOM 进行映射，虽然是操作的React元素，但这些操作最终都会在真是的DOM中体现出来。

使用root.render()渲染页面的时候，页面就会重新渲染

React会通过diffing算法，将新的元素和旧的元素进行比较

通过比较会找到 发生变化的元素，并且只对变化的元素进行修改，没有发生变化的就不处理。

注意JSX中的数组显示：

我们在JSX中显示数组时，数组中每一个元素都需要设置一个Key，否则控制台会显示红色警告，开发中一般用ID 作为Key。

这是因为React 默认情况下是根据位置比较元素，若是遇到下列情况，需要重新渲染的时候，就会把所有的元素都修改一遍。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

<ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

所以设置Key之后，就会比较相同的Key的元素，而不是按照顺序进行比较。

  const arr = data.map((item) => <li key={item}>{item}</li>)

  const list = <ul>{arr}</ul>

  const root = ReactDOM.createRoot(document.getElementById("root"))
  root.render(list)

05 一些小配置

使用 React 的推荐配置安装 ESLint

可以提供代码检查

"eslintConfig": {
    "extends": [
      "react-app"
    ]
  },