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 >;
}
}
更新阶段
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 >;
}
}
卸载阶段
componentWillUnmount(): 组件即将卸载时调用，用于清理资源（如定时器、事件监听等）。
实例
class MyComponent extends React. Component {
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 >
) ;
}
}
属性传递
通过 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!" />
事件处理
通过事件处理函数处理用户交互。需要使用 .bind(this) 或箭头函数来确保 this 指向正确。
实例
class MyComponent extends React. Component {
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 >
) ;
}
}
列表渲染
通过数组的 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 >
) ;
}
}
受控组件
通过状态控制表单元素的值。
实例
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 >
) ;
}
}
设置状态: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。