part1_React(Hook)

最新推荐文章于 2024-07-31 17:14:32 发布

作鹜奔态

最新推荐文章于 2024-07-31 17:14:32 发布

阅读量164

点赞数

分类专栏： FullSatck_2022 文章标签： react.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_63823090/article/details/126641048

版权

FullSatck_2022 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

参考文章

https://zhuanlan.zhihu.com/p/208551225

命令

创建项目

$ npx create-react-app my-app
$ cd my-app
$ npm start

查看react版本
```
// 进入项目目录
$ npm info react
```
create-react-app会自动使项目成为git仓库，除非应用是在一个已经存在的仓库中创建的。在项目根部运行rm -fr .git命令可清除仓库设置。

React Hook

setState的异步执行

参考

useState如何和组件对应

散点

在React中是禁止直接改变状态的，因为它可能导致意想不到的副作用。改变状态必须始终通过将状态设置为一个新的对象来完成。如果前一个状态对象的属性没有改变，它们需要简单地复制，这可以通过将这些属性复制到一个新的对象中，并将其设置为新的状态来完成。
涉及到数组类型的状态更新时，能使用.concat（不改变原数组，返回新对象）方法就不要使用.push（改变数组，返回原数组）方法。React组件的状态是不能直接改变的。即使改变状态在某些情况下看起来是有效的，它也会导致很难调试的问题。
useState函数（以及课程后面介绍的useEffect函数）不能从循环、条件表达式或任何不是定义组件的函数的地方调用。这样做是为了确保Hook总是以相同的顺序被调用，如果不是这样的话，应用将表现得不正常。
事件处理程序被定义为一个函数调用，这意味着事件处理程序实际上被分配了函数的返回值
正常情况下事件处理程序只能是函数或者函数引用
```
 const hello = () => {
 const handler = () => console.log('hello   world')
 return handler
 }
```

箭头函数中`=>`后花括号影响

带有花括号默认无返回值需要定义return才有返回值，带有小括号的默认有返回值。

数组

数组的内容可以被修改，尽管它被定义为const。因为数组是一个对象，这个变量总是指向同一个对象。然而, 数组的内容随着新项目的加入而改变.

遍历数组
遍历数组项目的一种方法是使用forEach，如图所示。forEach接收一个用箭头语法定义的函数作为参数。forEach为数组中的每个项调用函数，总是传递单个项作为参数。作为forEach参数的函数也可以接收其他参数。
```
 value => {
  console.log(value)
}
```
.concat方法
该方法不会将项目添加到数组中，而是创建一个新的数组，其中同时包含旧数组和新项目的内容。

.map方法
接受旧数组作为参数，创建新数组例如创建一个各项值都为原项两倍的新数组
也可以将数组转化为完全不同的东西。

 const m2 = t.map(value => '<li>' + value + '</   li>')
 console.log(m2)
// [ '<li>1</li>', '<li>2</li>', '<li>3</li>' ] is    printed

 const t = [1, 2, 3, 4, 5]

const [first, second, ...rest] = t

console.log(first, second)  // 1, 2 is printed
console.log(rest)          // [3, 4, 5] is printed

this

新建一个对象，包括属性和方法，当通过创建另外一个对象引用调用方法时，原始方法中this的引用失效。
.bind方法可以保存原先的this引用
深入了解js中的this

对象传播

 const handleLeftClick = () => {
  const newClicks = {
    ...clicks,
    left: clicks.left + 1
  }
  setClicks(newClicks)
}

const handleRightClick = () => {
  const newClicks = {
    ...clicks,
    right: clicks.right + 1
  }
  setClicks(newClicks)
}

函数调用，函数引用，函数的区分

points

大括号内的任何内容都会被计算。
底层上，由React组件返回的JSX被编译成JavaScript。而不是返回HTML标记。
编译是由Babel处理的。用create-react-app创建的项目被配置为自动编译。
jsx的所有标签都需要被关闭，html中的换行符可以是<br>,但是jsx中必须是<br/>.
一个强制的惯例是在应用的组件树的顶端有一个叫做App的根组件。然而，正如我们将在第6章中了解到的，有些情况下，组件App并不完全是根，而是被包裹在一个适当的实用组件中。
React组件名称必须大写。如果使用小写的组件,React只会创建一个空的同名元素，即内置的HTML元素，而不是同名的自定义React元素。
React组件的内容（通常）需要包含一个根元素。也可以使用一个<></>空元素包裹。
不要在组件之内定义组件
Component
文件App.js现在定义了一个名为App的React组件。在文件index.js的最后一行的命令：
```
ReactDOM.createRoot(document.getElementById  ('root')).render(<App />)
```
将其内容渲染到div-元素中，该元素在文件public/index. html中定义，其id值为’root’。

index.js格式

Raact17

 import ReactDOM from 'react-dom'
 import App from './App'

 ReactDOM.render(<App />, document.getElementById   ('root'))

React18

 import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import App from './App'
 
 ReactDOM.createRoot(document.getElementById    ('root')).render(<App />)