React归档
本文最后更新于:2022年2月28日 晚上
React学习汇总
(一)JSX
1.1 基本语法
使用成对的标签构成一个树状结构的数据。
1.2 标签类型
DOM类型的标签(并非真正的dom标签,只是写法一致)
1
const imgEle = <img /> // 标签首字母必须小写
React组件类型的标签
1
const reactEle = <LikeStar /> // 标签首字母必须大写
1.3 JSX中的JS表达式
通过表达式给标签属性赋值
1
const ele = <MyComponent foo={1 + 2} />
通过表达式定义子组件
1
2
3
4
5
6const nameList = ['a', 'b', 'c'];
const nameEle = (
<ul>
{nameList.map(name) => <NameItem key={name} text={name} />}
</ul>
);多行js语句
jsx的
{}
中不支持多行js语句。通常将多行js封装成函数,在{}
中调用。
1.4 标签属性
- DOM标签属性
- 自定义标签属性
1.5 注释
使用花括号{}
将/**/
包裹起来
1 |
|
1.6 小结
- 并非必须,是React.createElement的语法糖
- 是React开发的首选
(二)元素
2.1 元素渲染为DOM
使用react-com
2.2 元素更新
元素代表某个时刻的状态。对于React来说,每次都会创建新的元素(img),但实际只更新变更部分(src)
(三)组件
独立的、可复用的模块。由这些组件组成应用的UI。
- 类组件(class)
- 函数组件
3.1 类组件
要素
- 关键字class
- 继承基类React.Compoent
- render方法return元素
3.2 函数组件
- 关键字function,建议首字母大写
- 入参props
- return元素
3.3 组件的props
属性校验
prop-types
库3.4 组件的state
constructor阶段被初始化
state的值不能直接修改,需使用setState(stateChange[, callback])(浅层合并)
a.浅层合并eg:
1
2
3
4
5
6
7
8
9// 初始化阶段
this.state = {
isLiked: false,
isChicked: false,
}
// 更新阶段
this.setState({
isLiked: true
})结果
1
2
3
4{
isLiked: true,
isClicked: false,
}教程里说是类似扩展运算符的做法(抽空看看源码实现)
1
2
3
4{
previousState,
...newState,
}b.回调函数
可直接从this中获取更新后的state值
1
2
3
4setState({ isLiked: true }, () => {
// 获取到更新以后的state值
this.state
})
3.5 有状态组件和无状态组件
区别:组件是否有state
无状态组件:推荐function形式编写
3.6 组件样式
className
1
2
3
4
5<div className='comment-like-wrapper'>
<LikeStar className='like-star' />
<!--多个className-->
<div className={`like-count ${className}`}>{likeCount}</div>
</div>CSS-in-JS
短线连接->驼峰background-color -> backgroundColor
3.7 组件和元素
联系: 组件最核心的作用是返回React元素。
1
2
3<Parent>
<Children>自组件</Children>
</Parent>例子:
1
2
3
4
5
6
7import Children from 'Children';
class Parent extends React.Component {
render() {
const { tip } = this.props;
return <Children tip={tip} />
}
}(四)组件生命周期
- 挂载时
- 更新时
- 卸载时
4.1 constructor
ES6 class的构造方法
应用场景:
- state初始化
- 进行方法绑定
注意:
- 不要调用this.setState
- super()的执行,在派生类中使用this必须在执行super()之后
1
2
3
4
5constructor(props) {
super(props);
this.state = { counter: 0 };
this.handleClick = this.handleClick.bind(this);
}4.2 getDerivedStateFromProps
少用,通常有替代方案。
特点
- 每次渲染前都会被调用
- 静态方法,无法使用this
目的:使组件在props变化时更新state。
props的更新 -> state <- this.setState
1 |
|
4.3 render
描述界面UI效果。render应为纯函数。是class类中唯一必须实现的方法。
render方法仅返回UI描述,并不参与最终渲染
- React元素
<div />, <MyComponent />
… - 数组或fragments
- Portals
- 字符串、数值类型
- 布尔类型、null 终端界面无渲染
4.4 componentDidMount
在组建挂载后(插入DOM树中)立即调用
使用场景:
- 依赖于DOM节点的初始化
- 通过网络请求获取数据 ajax请求 => this.setState
4.5 componentDidUpdate
更新后会被立即调用。
componentDidUpdate(prevProps, prevState, snapshot) => void
应用:对更新后的DOM进行操作。
1 |
|
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!