React 组件和 prop：入门教程

组件和 props
React 的核心概念是组件。组件是可重用的代码块，用于描述 UI 中的一部分内容。组件可以通过 props 接收输入，通过 state 管理本地数据，并通过事件处理程序响应用户的操作。
例如，我们可以创建一个名为 Button 的组件，该组件接受两个 prop：text 和 onClick。这两个 prop 分别表示按钮上的文本和当用户点击按钮时应执行的回调函数。

function Button(props) {return (<button onClick={props.onClick}>{props.text}</button>);
}// 使用 Button 组件
<Button text="Click me!" onClick={() => alert('Button clicked!')} />

在这个例子中，Button 组件接收一个对象作为参数。这个对象包含了组件所需的 prop。组件内的代码可以访问这些 prop，并根据其值来决定组件的行为。
除了函数式组件之外，React 还支持类组件。类组件是使用 ES6 类语法编写的组件，并且具有更多的功能，例如生命周期方法和静态属性。下面是一个简单的类组件示例：

class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>;}
}ReactDOM.render(<Welcome name="Sara" />,document.getElementById('root')
);

在这个例子中，Welcome 组件接收一个名为 name 的 prop，并将其显示在 <h1> 标签中。与函数式组件不同，类组件必须在其内部定义一个名为 render 的方法来定义其输出。
除了从父组件接收到的 prop 之外，组件还可以有自己的本地数据，这被称为 state。state 是由组件自己控制的，它通常表示组件当前的状态。当我们改变一个组件的 state 时，React 将自动重新渲染该组件以反映新的 state。
例如，我们可以创建一个名为 Counter 的组件，该组件有一个初始的 state，即 count。当用户单击按钮时，我们将增加 count 的值，并更新组件的 state。

class Counter extends React.Component {constructor(props) {super(props);this.state = {count: 0};}increment() {this.setState({count: this.state.count + 1});}render() {return (<div>Count: {this.state.count}{' '}<button onClick={() => this.increment()}>Increment</button></div>);}
}ReactDOM.render(<Counter />,document.getElementById('root')
);