参考文章
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的异步执行
参考
散点
- 在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的最后一行的命令:
将其内容渲染到div-元素中,该元素在文件public/index. html中定义,其id值为’root’。ReactDOM.createRoot(document.getElementById ('root')).render(<App />)
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 />)
js有关参考
- javascriptMDN
- [javascript再认识](https://developer.mozilla.org/en-US/docs/Web/JavaScript/