React 组件 API
React 组件 API
React 是一个用于构建用户界面的 JavaScript 库,其核心概念是组件化开发。组件是独立的、可复用的代码单元,代表了浏览器中的某个部分。React 组件 API 为 React 中组件的创建和使用提供了一系列接口。下面是几个重要的 React 组件 API:
React.Component
React.Component 是一个基类(也称为父类), 它提供了许多方法和属性,是所有 React 组件的基础。组件可以扩展这个类并实现必需的方法以创建自己的组件。
render()
此方法必需。它返回一个描述组件渲染结果的 React 元素。
class MyComponent extends React.Component {
render() {
return <div>Hello, world!</div>;
}
}
setState()
此方法更新组件的 state,并安排重新渲染。它接受一个对象或函数作为参数。如果传递的是函数,函数将接受前一个 state 作为第一个参数,此函数必须返回一个包含更新状态的对象。
this.setState({counter: this.state.counter + 1});
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));
Props
组件的 props 是父组件传递到子组件的属性对象。它是只读的,因此组件无法更改它们。父组件负责定义这些 props 并将它们传递给子组件。
在子组件内部,可以通过 this.props
访问它们。
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
const element = <Greeting name="World" />;
ReactDOM.render(
element,
document.getElementById('root')
);
生命周期方法
在组件的生命周期中,React 可以调用不同的方法,具体取决于何时和如何更新组件。下面是一些重要的生命周期方法:
componentDidMount()
在组件挂载后被调用。可以使用这个方法设置计时器、启动网络请求等。
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentDidUpdate(prevProps, prevState, snapshot)
在组件更新后被调用。可以在此方法中进行一些更新之后的操作。
componentDidUpdate(prevProps, prevState, snapshot) {
if (prevProps.user !== this.props.user) {
// do something
}
}
componentWillUnmount()
当组件将要被卸载时被调用。可以使用此方法清除计时器、取消网络请求等。
componentWillUnmount() {
clearInterval(this.timerID);
}
总结
React 组件 API 是构建 React 应用程序的核心。组件可以通过继承 React.Component
类来定义自己的 API。生命周期方法可以在应用程序的不同阶段执行操作,从而为开发人员提供更多的控制权。props 可以让父组件很容易地将数据传递到子组件。通过使用这些 API,开发人员可以创建高度可复用的组件并构建规模化的 React 应用程序。