React 入门学习笔记
npx create-react-app demo 创建react demo ,此命令行不需要提前安装create-react-app 脚手架，创建demo后就会删除了
vue 微信小程序 都是MVVM框架
react 是MVC框架
jsx 文件首字母必须大写用于区分html标签;文件名可以是js或者jsx，不影响文件中的代码
React.StrictMode 启用严格模式，仅在开发模式运行，他们不会影响生产构建；可以为任何部分启用严格模式
- 识别不安全的生命周期
- 关于使用过时字符串ref API的警告
- 关于使用废弃的findDOMNode方法的警告
- 检测意外的副作用
- 检测过时的context API
- 确保可复用的状态
React.Component class组件
-
子类中必须定义render()函数
-
生命周期
-
挂载
-
constructor()
在为 React.Component 子类实现构造函数时，应在其他语句之前调用 super(props)。否则，this.props 在构造函数中可能会出现未定义的 bug。
通常，构造函数仅用于以下两种情况：
通过给 this.state 赋值对象来初始化内部 state;
为事件处理函数绑定实例constructor(props) { super(props); // 不要在这里调用 this.setState() this.state = { counter: 0 }; this.handleClick = this.handleClick.bind(this); } -
render()
render() 方法是 class 组件中唯一必须实现的方法
-
static getDerivedStateFromProps() 不常用
-
componentDidMount()
-
-
更新
- static getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
-
卸载
- componentWillUnmount()
-
错误处理
- static getDerivedStateFromError()
- componentDidCatch()
-
-
其他APIs
- setState()
- forceUpdate() 强制让组件重新渲染
-
class属性
- defaultProps
可以为 Class 组件添加默认 props。这一般用于 props 未赋值，但又不能为 null 的情况。例如：
如果未提供 props.color，则默认设置为 'blue'class CustomButton extends React.Component { // ... } CustomButton.defaultProps = { color: 'blue' };render() { return <CustomButton /> ; // props.color 将设置为 'blue' } - displayName
displayName 字符串多用于调试消息。通常，你不需要设置它，因为它可以根据函数组件或 class 组件的名称推断出来。如果调试时需要显示不同的名称或创建高阶组件
- defaultProps
-
实例属性
- props
- state
JSX语法糖
属性使用驼峰命名 htmlFor、className
style属性特殊，使用对象;
属性填写变量是，不需要加引号
<label htmlFor="userName"></label>
<input className="input" type="text" name="userName"/>
<p style={{color: 'red'}}>这是红色的</p>
<p style={styleVal}>这是蓝色的</p>
三元运算与循环
<p style={{backgroundColor: isRed ? 'red' : 'blue'}}>这是红色吗： {isRed}</p>
<ul>
{
arr.map((ele,index) => {
return <li key={index}>{ele}</li>
})
}
</ul>
写法简化与vs扩展安装
ES7+ React 扩展插件
- rcc -> react class component class式组件
- rfc -> react function component 函数式组件
setState、事件 用法
import React, { Component } from 'react'
export default class SetState extends Component {
constructor(props){
super(props)
this.state = {
num: 0
}
this.addFun = () => {
return this.setState({
num: this.state.num + 1
})
}
}
render() {
return (
<>
<div>数字为：{this.state.num}</div>
<button onClick={() => this.setState({num: this.state.num + 1})}>累加a</button>
<button onClick={this.addFun}>累加b</button>
<button onClick={() => this.addFun()}>累加b</button>
<button onClick={this.addNum.bind(this)}>累加c</button>
</>
)
}
addNum(){
this.setState({
num: this.state.num + 1
})
}
}
传参与样式
import React, { Component } from 'react'
import './App.css'
export default class paramsStyle extends Component {
render() {
return (
<div style={{
width:'200px',
height: '200px',
backgroundColor: 'gray'
}}>
<button onClick={this.btnClick.bind(this, 1)}>按钮1</button>
<button onClick={() => this.btnClick( 2)}>按钮2</button>
<p className="txt">这是有css样式的</p>
</div>
)
}
btnClick(val){
console.log(val);
}
}
函数式组件
- 函数式组件没有生命周期
- 可使用userEffect
- 函数式组件没有this
- 函数式组件没有state状态
- 可使用useState
- Hooks 使函数式组件更灵活，越来越受欢迎
- React官方提供的hook
- 开发人员自定义的hook
React默认组件是使用的大写字母开头，而自定义Hook函数使用的是use开头
import {useState, useEffect, useRef} from 'react'
export default function FuncType() {
// Hook 只能用在组件函数中的最顶层
const [msg, setMsg] = useState('你好世界')
const [num, setNum] = useState(1)
// 挂载完成
useEffect(()=>{
console.log('挂载完成')
}, [])
// 监听数据更新 监听哪个变量，就填写到数组中;不传则默认监听所有；不监听任何数据，则传空数组
useEffect(()=>{
console.log('num更新了')
}, [num])
// beforeDestroyed 销毁 处理脏数据或垃圾回收
useEffect(()=>{
return ()=>{
console.log('销毁阶段');
}
})
const fn = ()=>{ setMsg('hello world')}
return (
<>
<div>{msg}</div>
<button onClick={() => setMsg('h你好世界')}>修改文本1</button>
<button onClick={() => msg = 'hello world'}>修改文本2-会报错</button>
<button onClick={fn}>修改文本3</button>
<hr />
<button onClick={()=>setNum(num + 1)}>累加{num}</button>
</>
)
}
