1. Daily usage of React
1. Definition of class name
<div className="box"></div>
2. Class components
import React from 'react';
class MyButton extends React.Component {
render() {
return (
<button>{
this.props.text }</button>
)
}
}
<div className="box">
<MyButton text='提交' />
</div>
3. Function components
import React from 'react';
const MyButton = (props) => {
return (
<button>{
props.text}</button>
);
}
<div className="box">
<MyButton text='提交' />
</div>
4. Component added event
Here we take the click event as an example, and other formats are in onXXX camel case.
const clickButton = () => {
console.log('You just clicked me.')
}
<button onClick={
clickButton}>
点我
</button>
5. Class components define state
import React from 'react';
class User extends React.Component {
/**
* 1. state 必须在 constructor 初始化
* 2. 使用 constructor 必须调用 super(props)
* 3. 事件调用 this.setState 更新数据时该事件必须在 constructor 先 .bind(this)
*/
constructor(props) {
super(props)
this.state = {
name: 'Tony',
age: 20
}
this.changeUser = this.changeUser.bind(this)
}
changeUser() {
this.setState({
name: 'Jack',
age: 18
});
}
renderButton() {
return (
<button onClick={
this.changeUser}>更换姓名</button>
)
}
render() {
return (
<div className='user'>
<span>Name: {
this.state.name }</span>
<br />
<span>Age: {
this.state.age }</span>
<div>
{
this.renderButton() }
</div>
</div>
);
}
}
6. Function component defines state
import React from 'react';
import {
useState, useEffect } from 'react';
class MyButton extends React.Component {
const [userName, setUserName] = useState('小明');
setUserName(state, newUserName) {
// 变更姓名，这里暂时没地方调用，仅提供案例。
return {
...state,
newUserName,
}
}
render() {
return (
<div>{
userName }</div>
<button>{
this.props.text }</button>
)
}
}
<div className="box">
<MyButton text='提交' />
</div>
7. The class subcomponent calls the function of the parent component through props
import React from 'react';
class Father extends React.Component {
constructor(props) {
super(props)
this.getFatherName = this.getFatherName.bind(this)
}
getFatherName() {
return 'Jack'
}
render() {
return (
<div className="Father">
// 引入类子组件
<Child getFatherName={
this.getFatherName}/>
</div>
)
}
}
// 类子组件
class Child extends React.Component {
constructor(props) {
super(props)
this.emitFatherFun = this.emitFatherFun.bind(this)
}
emitFatherFun() {
alert(this.props.getFatherName())
}
render() {
return (
<div className="Child">
<button onClick={
this.emitFatherFun}>点击触发父组件函数</button>
</div>
)
}
}
8. Class components introduce function components
import React from 'react';
/**
* 1. props 直接使用，不用加上 this
* 2. 定义函数组件只需 return 元素即可，不用像类那样要通过 extends React.Component 来定义组件。
*/
const PureGreetCom = (props) => {
return (
<div className="PureCom">
<span>Hi, {
props.name } </span>
</div>
)
}
class Father extends React.Component {
render() {
return (
// 引入函数组件
<PureGreetCom name="Jack" />
)
}
}
9. Lifecycle functions of class components
class CMP extends React.Component {
constructor() {
}
componentDidMount() {
} // 组件第一次加载时执行
componentDidUpdate() {
} // 组件更新时执行
componentWillUnmount() {
} // 组件即将销毁时执行
}
10. Use map array to render multiple components or elements
const UL = () => {
return (
<ul>
{
List }
</ul>
)
}
/**
* 循环遍历元素时与 Vue 一样，要加上唯一 key
*/
const List = [1, 2, 3, 4, 5].map((index) => {
return (
<li key={
index}> {
index } </li>
)
})
// 使用方式
<UL />
11. Define variable components
/**
* 1. 与函数/类组件不同，变量组件的使用方式要用 { Hello } 而不是 <Hello />
*/
const name = 'Jack'
const Hello = <h1> Hello {
name }</h1>
12. Combine props.children (called 'slots' in Vue)
/**
* 普通插槽
*/
const List = () => {
return (
<div>
{
props.children }
</div>
)
}
/**
* 具名插槽
*/
import React from 'react';
const Bar = () => {
return (
<div className="left">{
props.left }</div>
<div className="right">{
props.right } </div>
)
}
class Main extends React.Component {
render() {
return (
<List>
{
[1, 2, 3].map((i) => {
return <li> {
i } </li>
})}
</List>
<Bar>
left={
// 指向 Bar 里的 left 插槽。
<div className="BarLeft"></div>
}
right={
// 指向 Bar 里的 right 插槽。
<div className="BarRight"></div>
}
</Bar>
)
}
}
13. Function components use useEffect/useState hooks
useEffect can simulate the three major life cycle functions in class components, and useState can be used to declare responsive variables.
import {
useState, useEffect } from 'react';
const List = () => {
const [arr, setArr] = useState([1, 2, 3, 4])
useEffect(() => {
// 第一次加载时模拟 componentDidMount。
// Do something ...
return () => {
// 组件销毁时模拟 componentWillUnmount。
// Do something ...
};
}, [arr]) // 字段更新时模拟 omponentDidUpdate。
return (
<ul>
{
arr.map((num) => Item(num, setArr) )}
</ul>
)
}
2. React writing principles
- The state cannot be modified directly, and a copy should be used instead of merging, following the immutable principle.
- Subcomponents cannot modify props directly. This operation is the responsibility of the parent component, following the top-down principle.
- setState({}) is an asynchronous update, setState(() => {}) is a synchronous update.