6.事件处理：React组件可以响应用户的交互事件，例如点击、输入等。通过事件处理函数，可以对用户操作做出响应并更新组件状态或执行其他操作。
// 事件处理示例 class Button extends React.Component { handleClick() { console.log('Button clicked'); } render() { return <button onClick={this.handleClick}>Click me</button>; } }
7.条件渲染：根据条件决定是否渲染特定的组件或内容。通过条件判断语句或三元表达式，可以在组件渲染过程中根据需要进行不同的渲染。
// 条件渲染示例 function Greeting(props) { if (props.isLoggedIn) { return <h1>Welcome back!</h1>; } else { return <h1>Please sign up.</h1>; } } const element = <Greeting isLoggedIn={false} />;
8.列表渲染：通过遍历数组或对象，将数据动态地渲染为列表。使用map函数可以方便地生成列表元素。
// 列表渲染示例 function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => ( <li key={number.toString()}>{number}</li> )); return <ul>{listItems}</ul>; } const numbers = [1, 2, 3, 4, 5]; const element = <NumberList numbers={numbers} />;
9.表单处理：React提供了一些用于处理表单的组件和方法，例如input、textarea、select等。可以通过这些组件获取用户输入的数据，并在组件内部进行处理。
// 表单处理示例 class NameForm extends React.Component { constructor(props) { super(props); this.state = { value: '' }; } handleChange(event) { this.setState({ value: event.target.value }); } handleSubmit(event) { event.preventDefault(); console.log('Name submitted: ' + this.state.value); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" value={this.state.value} onChange={this.handleChange} /> </label>
10.组件通信：React组件之间可以通过属性传递数据和回调函数进行通信。父组件可以将数据作为属性传递给子组件，子组件可以通过调用父组件提供的回调函数来通知父组件发生了某些事件。
// 组件通信示例 class ParentComponent extends React.Component { constructor(props) { super(props); this.state = { message: '' }; } handleMessageChange = (message) => { this.setState({ message }); }; render() { return ( <div> <ChildComponent message={this.state.message} onMessageChange={this.handleMessageChange} /> </div> ); } } class ChildComponent extends React.Component { handleChange = (event) => { this.props.onMessageChange(event.target.value); }; render() { return ( <div> <input type="text" value={this.props.message} onChange={this.handleChange} /> </div> ); } }
以上是React的一些常用知识点，掌握了这些知识，可以更好地开发React应用程序。
