react学习

一：
使用npx命令创建 临时下载脚手架 项目成功后自动删除 不占用空间 不担心版本低
1.运行命令：
npx create-react-app demo
2.cd 到创建的目录下
cd demo
3.根据package.json中的命令来运行
npm run start
run是可以不写的

二：
点击终端的分栏 即可进行操作并不需要关闭正在运行的项目了
1.把src所有文件都删除 只保留一个index.js
cd src
rm *
2.新建一个index.js
import ReactDOM from "react-dom";

//第一个参数为html元素，第二个为要注入的元素
ReactDOM.render(<h2>你好</h2>,document.getElementById("root"))

三：
react可以支持jsx和js的后缀名 都可以使用
1.新建文件 首字母大写
import React from "react";

class App extends React.Component {
render() {
return (
<div>
<div>123</div>
<input type="text" />
</div>

)
}
}
export default App;

2.在index.js中引入并取代
import ReactDOM from "react-dom";
import App from "./App.jsx"

//第一个参数为html元素，第二个为要注入的元素
ReactDOM.render( < App /> , document.getElementById("root"))

1.文件名可以是jsx或者js后缀，不影响使用
2.组件名称必须大写
3.js文件中写()表示想要写html
4.html中出现{}表示想写js
5.其实export default 可以写到class前面
6.安装插件 es7+react 第一个 然后使用的时候就直接rcc就可以生成类组件结构，rfc生成函数结构

四：
1.htmlFor代表的就是for
2.class变成className
3.style是使用{{}}，两个括号，属性用驼峰原则。变量是使用一个括号，写style也可以定义一个变量
const myStyle = {color:"red"}
style={myStyle}
4.创建类的时候需要一个标签去包裹，可以用div也可以用空标签
5.for循环需要直接使用方法 没有快捷指令，列表循环有且只有map，因为只有map才有返回值
<ul>
{
arr.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>

也可以不用return 直接放在一行
arr.map((item,index)=><li key={index}>{item}</li>)

五.
1.setState用来动态修改数据

import React, { Component } from 'react'

export default class App2 extends Component {
state = {
num: 1
}
render() {
return (
<div>
<h2>{this.state.num}</h2>
<button onClick={() => this.setState({ num: this.state.num + 1 })}>
累加
</button>
</div >
)
}
}

//完整写法
constructor(props) {
super(props)
this.state = {
num: 1
}
}

2.声明函数后引用的时候使用this.方法名 注意不能加括号，因为页面是自上到下 找到方法就会直接触发

六：
1.函数式组件没有声明周期
2.函数式组件没有this
3.函数式组件没有state
* useEffect来模拟mounted和updated 页面初始化不论怎样都会执行一次
* 页面初始化执行为mounted 放请求数据
* 第二个参数写参数为updataed
* 直接在方法中return一个方法为beforedestoryed
* 1.当不想检测页面任何数据更新可以直接给空数组
* 2.放几个数据就检测几个 不设置参数则是检测全部

七：
1.父传子：
类组件中子组件使用static defaultProps定义默认值
this.props.xx来使用数据
PropTypes.number.isRequired 为必传
2.子传父
子组件拿到父组件定义的方法直接传值就可以
useContext是hook 可以简写createContext中子组件的标签
<NumContext.Consumer>
{
({ num, setNum }) => {
return (
<>
<h2>{num}</h2>
<button onClick={() => { setNum(4343) }}>更改num</button>
</>
)
}
}
</NumContext.Consumer>

变成
const { num, setNum } = useContext(NumContext)
<>
<h2>{num}</h2>
<button onClick={() => { setNum(4343) }}>更改num</button>
</>

八：
纯静态子组件使用
memo表示子组件不受父组件更新影响
直接让子组件等于memo方法（里面写返回标签内容）

搭配usecallback使用
usememo也是一样的 但是要在函数中重新返回函数 即为高阶函数