react组件基本用法示例小结

组件是React库的核心概念，它们是可重用的代码块，可以封装HTML、JavaScript以及样式，形成独立的、可管理的UI部分。本篇将详细阐述React组件的基本用法，包括组件间的值传递、组件的生命周期以及受控组件与非受控组件的概念。 一、组件间传值 在React中，组件间通信主要通过props（属性）进行。例如，当一个父组件需要向子组件传递数据时，可以通过在子组件的声明中设置props来实现： ```jsx <ChildComponent someData={parentData} /> ``` 在这个例子中，`someData`是传递给`ChildComponent`的prop，其值为`parentData`。子组件可以在自己的`render`方法中使用这些props。 另外，当需要从子组件向父组件传递数据时，通常会使用事件处理函数。例如，父组件可以提供一个回调函数作为prop，当子组件触发特定事件时调用这个函数： ```jsx class ParentComponent extends React.Component { handleCallback = (childValue) => { // 在这里处理childValue } render() { return ( <ChildComponent onChildAction={this.handleCallback} /> ); } } class ChildComponent extends React.Component { handleClick = () => { this.props.onChildAction("子组件的值"); } render() { return <button onClick={this.handleClick}>触发事件</button>; } } ``` 二、组件的生命周期 React组件有三个主要的生命周期阶段：挂载阶段（Mounting）、更新阶段（Updating）和卸载阶段（Unmounting）。每个阶段都有相应的生命周期方法，如`componentDidMount`在组件挂载后执行，`componentDidUpdate`在组件更新后执行，`componentWillUnmount`在组件卸载前执行。这些方法可以用来执行初始化操作、数据获取或者清理工作。 三、受控组件与非受控组件 在React中，表单元素的值有两种管理模式：受控组件和非受控组件。 1. 受控组件：在受控组件中，表单元素的值始终由React组件控制。当用户输入时，会触发对应的事件处理函数，通过更新state来改变组件的值。这样，组件的state就反映了表单的当前状态。 ```jsx class ControlledInput extends React.Component { state = { value: "" }; handleChange = (event) => { this.setState({ value: event.target.value }); }; render() { return ( <input type="text" value={this.state.value} onChange={this.handleChange} /> ); } } ``` 2. 非受控组件：非受控组件则不直接通过state管理表单的值，而是通过`ref`属性来访问DOM元素，从而获取或设置其值。例如： ```jsx class UncontrolledInput extends React.Component { inputRef = React.createRef(); handleClick = () => { console.log(this.inputRef.current.value); }; render() { return ( <div> <input type="text" ref={this.inputRef} /> <button onClick={this.handleClick}>获取值</button> </div> ); } } ``` 总结，React组件的基本用法涉及组件间的数据传递、组件生命周期的管理以及表单数据的控制。理解并熟练运用这些概念，能够帮助开发者构建高效、可维护的React应用。