系统学习React
- 一.基础知识
-
- 邂逅React开发
- React系列一 - 核心JSX语法一
- React系列二 - 核心JSX语法二
- React系列三 - 阶段案例练习
- React系列四 - React脚手架
- React系列五 - 组件化开发(一)
- React系列六 - 父子组件通信
- React系列七 - 非父子组件通信
- React系列八 - 深入理解setState
- React系列九 - 知识补充和受控非受控组件
- React系列十 - 高阶组件以及组件补充
- React系列十一 - React中的CSS
- React系列十二 - AntDesign UI库
- React系列十三 - axios库的使用
- React系列十四 - React过渡动画
- React系列十五 - Redux与状态管理
- React系列十九 - 掌握react-router
- React系列二十 - Hook(一)基本使用
- React系列二十一 - Hook(二)高级使用
- React事件机制/严格模式详解
- React +TS最佳实践
- React 的代码整洁与错误用法避免
- 性能优化
- 二.进阶内容
一.基础知识
邂逅React开发
React系列一 - 核心JSX语法一
点击博客
官方网站
React内容整体比较多,比较接近原生,使用起来更加灵活。相比于Vue,更接近模板,使用起来比较简单,很多东西不用考虑。就和手动挡汽车和自动档车子有点像。
React系列二 - 核心JSX语法二
React系列三 - 阶段案例练习
React系列四 - React脚手架
React系列五 - 组件化开发(一)
二. 创建React组件
2.1. 创建类组件
类组件的定义有如下要求:
- 组件的名称是大写字母开头的(无论类组件还是函数组件)
- 类组件需要继承自 React.Component
- 类组件必须实现render函数
【注意】 - 标签HTML标签是不区分大小写的
- 在JSX中是严格区别大小写的()
小写指的就是普通HTML标签元素,大写开头就是组件,如果你把标签名字写成大写,它就会把这个标签当成组件,而你没有定义这个组件,也没有导入这个组件,它就会报如下错误。
快速开发react的两个方式
vscode中一键生成react代码块以及快速补全react代码
vscode中一键生成react代码块以及快速补全react代码2
- 在VScode中定义代码块(把类组件和函数组件定义方式定义成代码块)
- 下载插件,该插件帮助我们定义了特别多的React代码块,包括一些东西的导入,Redux/React Hooks/React Native/PropTypes
具体请自行查看。
①例如类组件生成方式的快捷键是rcc
②函数式组件的生成方式rfc
组件的生命周期代码演示方法调用顺序
(1)挂载阶段
import React, {
Component } from 'react'
export default class App extends Component {
constructor(){
super();
console.log("执行了组件的constructer方法");
}
render() {
console.log("执行了组件的Render方法");
return (
<div>
我是App组件
</div>
)
}
componentDidMount(){
console.log("执行了组件的componentDidMount方法");
}
}
(2)更新阶段
import React, {
Component } from 'react'
export default class App extends Component {
constructor() {
super();
this.state = {
counter: 0
}
console.log("执行了组件的constructer方法");
}
render() {
console.log("执行了组件的Render方法");
return (
<div>
我是App组件
<h2>当前计数:{
this.state.counter}</h2>
<button onClick={
e => this.increment()}>+1</button>
</div>
)
}
increment(){
this.setState({
counter:this.state.counter + 1
})
}