淘宝双十一超级红包 》
React 组件 API
React 组件 API 涉及多个重要的方面，包括生命周期方法、状态管理、属性传递和事件处理。
以下是 React 组件 API 的详细说明：
生命周期方法
React 组件的生命周期方法分为三个主要阶段：挂载、更新和卸载，详细说明参见：React 组件的生命周期 。
挂载阶段
constructor(props): 构造函数，用于初始化状态或绑定方法。static getDerivedStateFromProps(props, state): 每次在调用 render 方法之前调用，用于更新状态。componentDidMount(): 组件挂载后调用，此时可以进行 DOM 操作或数据请求。
实例
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.reset) {
return { count: 0 };
}
return null;
}
componentDidMount() {
console.log('Component mounted');
}
render() {
return <div>{this.state.count}</div>;
}
}
constructor(props) {
super(props);
this.state = { count: 0 };
}
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.reset) {
return { count: 0 };
}
return null;
}
componentDidMount() {
console.log('Component mounted');
}
render() {
return <div>{this.state.count}</div>;
}
}
更新阶段
static getDerivedStateFromProps(props, state): 与挂载阶段相同，用于更新状态。shouldComponentUpdate(nextProps, nextState): 返回布尔值，决定组件是否重新渲染。render(): 渲染组件的 UI。getSnapshotBeforeUpdate(prevProps, prevState): 在 DOM 更新之前调用，用于捕获一些信息（如滚动位置）。componentDidUpdate(prevProps, prevState, snapshot): 在组件更新后调用。
实例
class MyComponent extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
return nextState.count !== this.state.count;
}
getSnapshotBeforeUpdate(prevProps, prevState) {
return { scrollPosition: window.scrollY };
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (snapshot) {
window.scrollTo(0, snapshot.scrollPosition);
}
console.log('Component updated');
}
render() {
return <div>{this.state.count}</div>;
}
}
shouldComponentUpdate(nextProps, nextState) {
return nextState.count !== this.state.count;
}
getSnapshotBeforeUpdate(prevProps, prevState) {
return { scrollPosition: window.scrollY };
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (snapshot) {
window.scrollTo(0, snapshot.scrollPosition);
}
console.log('Component updated');
}
render() {
return <div>{this.state.count}</div>;
}
}
卸载阶段
componentWillUnmount(): 组件即将卸载时调用，用于清理资源（如定时器、事件监听等）。
实例
class MyComponent extends React.Component {
componentWillUnmount() {
console.log('Component will unmount');
}
render() {
return <div>{this.state.count}</div>;
}
}
componentWillUnmount() {
console.log('Component will unmount');
}
render() {
return <div>{this.state.count}</div>;
}
}
状态管理
状态是一个组件内部的数据，使用 this.state 来定义和管理。通过 setState 方法更新状态。
实例
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState((prevState) => ({ count: prevState.count + 1 }));
};
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState((prevState) => ({ count: prevState.count + 1 }));
};
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
属性传递
通过 this.props 访问传递给组件的属性，可以使用 PropTypes 进行类型检查。
实例
import PropTypes from 'prop-types';
class MyComponent extends React.Component {
render() {
return <div>{this.props.title}</div>;
}
}
MyComponent.propTypes = {
title: PropTypes.string.isRequired,
};
// 使用组件并传递属性
<MyComponent title="Hello, World!" />
class MyComponent extends React.Component {
render() {
return <div>{this.props.title}</div>;
}
}
MyComponent.propTypes = {
title: PropTypes.string.isRequired,
};
// 使用组件并传递属性
<MyComponent title="Hello, World!" />
事件处理
通过事件处理函数处理用户交互。需要使用 .bind(this) 或箭头函数来确保 this 指向正确。
实例
class MyComponent extends React.Component {
handleClick = () => {
console.log('Button clicked');
};
render() {
return <button onClick={this.handleClick}>Click me</button>;
}
}
handleClick = () => {
console.log('Button clicked');
};
render() {
return <button onClick={this.handleClick}>Click me</button>;
}
}
条件渲染
通过条件语句控制组件的渲染。
实例
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { isVisible: true };
}
toggleVisibility = () => {
this.setState((prevState) => ({ isVisible: !prevState.isVisible }));
};
render() {
return (
<div>
{this.state.isVisible && <p>This is visible</p>}
<button onClick={this.toggleVisibility}>Toggle</button>
</div>
);
}
}
constructor(props) {
super(props);
this.state = { isVisible: true };
}
toggleVisibility = () => {
this.setState((prevState) => ({ isVisible: !prevState.isVisible }));
};
render() {
return (
<div>
{this.state.isVisible && <p>This is visible</p>}
<button onClick={this.toggleVisibility}>Toggle</button>
</div>
);
}
}
列表渲染
通过数组的 map 方法渲染列表。
实例
class MyComponent extends React.Component {
render() {
const items = ['Item 1', 'Item 2', 'Item 3'];
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
}
render() {
const items = ['Item 1', 'Item 2', 'Item 3'];
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
}
受控组件
通过状态控制表单元素的值。
实例
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { value: '' };
}
handleChange = (event) => {
this.setState({ value: event.target.value });
};
handleSubmit = (event) => {
event.preventDefault();
console.log('Submitted value:', this.state.value);
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="text" value={this.state.value} onChange={this.handleChange} />
<button type="submit">Submit</button>
</form>
);
}
}
constructor(props) {
super(props);
this.state = { value: '' };
}
handleChange = (event) => {
this.setState({ value: event.target.value });
};
handleSubmit = (event) => {
event.preventDefault();
console.log('Submitted value:', this.state.value);
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="text" value={this.state.value} onChange={this.handleChange} />
<button type="submit">Submit</button>
</form>
);
}
}
设置状态:setState
setState 是 React 中用于更新组件状态的方法。
语法格式如下：
setState(object nextState[, function callback])
参数说明
object nextState: 一个对象，包含要更新的状态键值对。React 会将这个对象合并到当前状态中。function callback: 一个可选的回调函数，会在状态更新并重新渲染完成后执行。
合并 nextState 和当前 state，并重新渲染组件。
setState 是 React 事件处理函数中和请求回调函数中触发 UI 更新的主要方法。
关于setState
不能在组件内部通过 this.state 修改状态，因为该状态会在调用 setState() 后被替换。
setState() 并不会立即改变 this.state，而是创建一个即将处理的 state。setState() 并不一定是同步的，为了提升性能 React 会批量执行 state 和 DOM 渲染。
setState()总是会触发一次组件重绘，除非在 shouldComponentUpdate() 中实现了一些条件渲染逻辑。
通过合理使用 setState，可以有效地管理组件状态，并确保在状态更新后执行必要的操作，从而提高应用的响应性和可靠性。
React 实例
class Counter extends React.Component{
constructor(props) {
super(props);
this.state = {clickCount: 0};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(function(state) {
return {clickCount: state.clickCount + 1};
});
}
render () {
return (<h2 onClick={this.handleClick}>点我！点击次数为: {this.state.clickCount}</h2>);
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Counter />
);
尝试一下 »
实例中通过点击 h2 标签来使得点击计数器加 1。