一、起步
创建一个React项目
1.创建项目：npx create-react-app my-app
2.打开项目：cd my-app
3.启动项目：npm start
4.暴露配置项：npm run eject
二、组件
组件，从概念上类似于 JavaScript 函数。它接受任意的入参(即 “props”)，并返回⽤于描述⻚面展示内容的 React 元素。
组件有两种形式：class组件和function组件。
class组件
class组件通常拥有状态和生命周期，继承于Component，实现render⽅法。
用class组件创建一个 Clock:
import React, { Component } from "react"
export default class ClassComponent extends Component {
constructor(props) {
super(props);
// 存储状态，在构造函数中初始化状态
this.state = {
date: new Date()
};
}
// 组件挂载完成后执行：启动定时器每秒更新状态
componentDidMount() {
this.timer = setInterval(() => {
// 更新state，不能用this.state
this.setState({
date: new Date()
})
}, 1000);
}
// 组件卸载之前执行：停止定时器
componentWillUnmount() {
clearInterval(this.timer);
}
componentDidUpdate() { // 每次有值更新都会执行
console.log("componentDidUpdate")
}
render() {
const { date } = this.state;
return (
<div>
<h3>ClassComponent</h3>
<p>{date.toLocaleTimeString()}</p>
</div>
)
}
}
function组件
函数组件通常无状态，仅关注内容展示，返回渲染结果即可。
从React16.8开始引入了hooks，函数组件也能够拥有状态
用function组件创建一个 Clock:
import React, { useState, useEffect} from "react";
export function FunctionComponent(props) {
const [date, setDate] = useState(new Date())
useEffect(() => { // 副作用
// 相当于componentDidMount、componentDidUpdate、componentWillUnmount的集合
const timer = setInterval(() => {
setDate(new Date())
}, 1000)
return () => clearInterval(timer) // 组件卸载的时候执行
},[])
return (
<div>
<h3>FunctionComponent</h3>
<p>{date.toLocaleTimeString()}</p>
</div>
)
}
三、正确使用setState
setState(partialState, callback)
1. partialState：object|function
⽤于产生与当前state合并的子集。
2. callback：function
state更新之后被调⽤。
关于 setState() 你应该了解三件事:
1.不要直接修改 State
例如，此代码不会重新渲染组件:
// 错误示范
this.state.comment = 'Hello';
而是应该使用 setState() :
// 正确使⽤
this.setState({
comment: 'Hello'
});
2.State 的更新可能是异步的
出于性能考虑，React 可能会把多个 setState() 调⽤合并成⼀个调用。
观察以下例子中log的值和button显示的counter。
setState在合成事件和生命周期中是异步的：
import React, { Component } from "react"
export default class SetStatePage extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0
}
}
componentDidMount() {
this.changeValue(1);
}
changeValue = (v) => {
// setState在合成事件和生命周期中是异步的，这里说的异步其实是批量更新，达到优化性能的目的
this.setState({
counter: this.state.counter + v
})
console.log("counter", this.state.counter);
}
setCounter = () => {
this.changeValue(1);
}
render() {
const { counter } = this.state;
return (
<div>
<h3>SetStatePage</h3>
<button onClick={this.setCounter}>{counter}</button>
</div>
)
}
}
使用定时器：setState在setTimeout中是同步的：
import React, { Component } from "react"
export default class SetStatePage extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0
}
}
changeValue = (v) => {
this.setState({
counter: this.state.counter + v
})
console.log("counter", this.state.counter);
}
setCounter = () => {
// setState在setTimeout中是同步的
setTimeout(() => {
this.changeValue(1);
}, 0);
}
render() {
const { counter } = this.state;
return (
<div>
<h3>SetStatePage</h3>
<button onClick={this.setCounter}>{counter}</button>
</div>
)
}
}
原生事件中修改状态：setState在原生事件中是同步的：
import React, { Component } from "react"
export default class SetStatePage extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0
}
}
componentDidMount() {
document.getElementById('test').addEventListener('click', this.changeValue);
}
changeValue = () => {
// setState在原生事件中是同步的
this.setState({
counter: this.state.counter + 1
})
console.log("counter", this.state.counter);
}
render() {
const { counter } = this.state;
return (
<div>
<h3>SetStatePage</h3>
<button id="test">原生事件*{counter}</button>
</div>
)
}
}
在回调中获取状态值：setState在回调中是同步的：
import React, { Component } from "react"
export default class SetStatePage extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0
}
}
changeValue = (v) => {
this.setState({
counter: this.state.counter + v
},() => {
// callback就是在state更新完成之后执行
console.log("counter", this.state.counter);
})
}
setCounter = () => {
this.changeValue(1)
}
render() {
const { counter } = this.state;
return (
<div>
<h3>SetStatePage</h3>
<button onClick={this.setCounter}>{counter}</button>
</div>
)
}
}
总结: setState只有在合成事件和生命周期函数中是异步的，在原⽣事件和setTimeout中都是同步的，这⾥的异步其实是批量更新。
3.State 的更新会被合并
import React, { Component } from "react"
export default class SetStatePage extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0
}
}
changeValue = (v) => {
this.setState({
counter: this.state.counter + v
},() => {
console.log("counter", this.state.counter);
})
}
setCounter = () => {
this.changeValue(1); // 不会执行
this.changeValue(2); // 不会执行
this.changeValue(3); // 会执行
}
render() {
const { counter } = this.state;
return (
<div>
<h3>SetStatePage</h3>
<button onClick={this.setCounter}>{counter}</button>
</div>
)
}
}
如果想要链式更新state:
import React, { Component } from "react"
export default class SetStatePage extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0
}
}
changeValue = (v) => {
// setState函数
this.setState(state => {
return {
counter: state.counter + v
}
})
}
setCounter = () => {
this.changeValue(1); // 会执行
this.changeValue(2); // 会执行
this.changeValue(3); // 会执行
}
render() {
const { counter } = this.state;
return (
<div>
<h3>SetStatePage</h3>
<button onClick={this.setCounter}>{counter}</button>
</div>
)
}
}
四、组件复合
复合组件给与你足够的敏捷去定义自定义组件的外观和行为，这种方式更明确和安全。如果组件间有公⽤用的⾮UI逻辑，将它们抽取为JS模块导入使⽤而不是继承它。
不具名：
HomePage.js文件内容如下：
import React, { Component } from "react";
import Layout from './Layout'
export default class HomePage extends Component {
render() {
return (
<Layout showTopBar={false} showBottomBar={true} title="首页">
<div>
<h3>HomePage</h3>
</div>
</Layout>
)
}
}
Layout.js文件内容如下：
import React, { Component } from "react";
import TopBar from '../components/TopBar'
import BottomBar from '../components/BottomBar'
export default class Layout extends Component {
componentDidMount() {
const { title = "商城" } = this.props;
document.title = title;
}
render() {
const { children, showTopBar, showBottomBar } = this.props;
console.log('children', children)
return (
<div>
{showTopBar && <TopBar />}
{children}
<h3>Layout</h3>
{showBottomBar && <BottomBar />}
</div>
)
}
}
TopBar.js文件内容如下：
import React, { Component } from "react";
export default class TopBar extends Component {
render() {
return (
<div>
<h3>TopBar</h3>
</div>
)
}
}
BottomBar.js文件内容如下：
import React, { Component } from "react";
export default class BottomBar extends Component {
render() {
return (
<div>
<h3>BottomBar</h3>
</div>
)
}
}
具名：传个对象进去
userPage.js文件内容如下：
import React, { Component } from "react";
import Layout from './Layout'
export default class UserPage extends Component {
render() {
return (
<Layout showTopBar={true} showBottomBar={true} title="用户中心">
{
{
content: (
<div>
<h3>UserPage</h3>
</div>
),
text: "这是一个文本",
btnClick: () => {
console.log("btnClick")
}
}
}
</Layout>
)
}
}
Layout.js文件内容如下：
import React, { Component } from "react";
import TopBar from '../components/TopBar'
import BottomBar from '../components/BottomBar'
export default class Layout extends Component {
componentDidMount() {
const { title = "商城" } = this.props;
document.title = title;
}
render() {
const { children, showTopBar, showBottomBar } = this.props;
console.log('children', children)
return (
<div>
{showTopBar && <TopBar />}
{children.content}
{children.text}
<button onClick={children.btnClick}>button</button>
<h3>Layout</h3>
{showBottomBar && <BottomBar />}
</div>
)
}
}
