5、React 事件处理全解析

React 事件处理全解析

1. React 组件中的状态与属性

在 React 组件里，状态（state）和属性（properties）是两个重要的概念。下面通过一个简单的函数式组件来感受它们之间的相互作用。

import React from 'react';
import { render } from 'react-dom';
import MyContainer from './MyContainer';

render(
  (<MyContainer />),
  document.getElementById('app')
);

这个例子展示了如何渲染一个 MyContainer 组件，该组件会为其子组件提供属性。

2. React 事件处理方式

React 采用在 JSX 中声明事件处理程序的方式来处理事件，这与传统的 JavaScript 事件处理方式有所不同。下面详细介绍 React 事件处理的各个方面。

2.1 声明事件处理程序

React 组件的事件处理是声明式的，与 jQuery 的命令式方式形成对比。声明式方法的优点是事件处理程序是 UI 结构的一部分，无需追踪分配事件处理程序的代码。

以下是一个基本的组件，为按钮的点击事件声明了一个事件处理程序：

import React, { Component } from 'react'