作者：1157476701qq | 来源：互联网 | 2023-08-26 09:52
React，由 Facebook 创建，是一个用于构建用户界面的开源 Javascript 库。它用于创建组件、处理状态和道具、利用事件侦听器和某些生命周期方法
React，由 Facebook 创建，是一个用于构建用户界面的开源 Javascript 库。它用于创建组件、处理状态和道具、利用事件侦听器和某些生命周期方法在数据更改时更新数据。React 将 HTML 与 Javascript 功能结合起来，创建自己的标记语言 JSX。本专题将向您介绍所有这些概念，以及如何实现它们和如何将其用于您自己的项目中。
我们可以结合目前为止所涵盖的概念来设计更复杂的有状态组件。这包括初始化 state，编写设置 state 的方法，以及指定单击处理程序来触发这些方法。Counter 组件跟踪 state 中的 count 值。有两个按钮分别调用 increment() 和 decrement() 方法。编写这些方法，使计数器值在单击相应按钮时增加或减少 1。另外，创建一个 reset() 方法，当单击 reset 按钮时，把计数设置为 0。注意：确保我们没有修改按钮的 classNames。另外，请记住在构造函数中为新创建的方法添加必要的绑定。
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
this.increment = this.increment.bind(this);
this.decrement = this.decrement.bind(this);
this.reset = this.reset.bind(this);
}
reset() {
this.setState({
count: 0
});
}
increment() {
this.setState(state => ({
count: state.count + 1
}));
}
decrement() {
this.setState(state => ({
count: state.count - 1
}));
}
render() {
return (
OnClick={this.increment}>Increment!
OnClick={this.decrement}>Decrement!
OnClick={this.reset}>Reset
Current Count: {this.state.count}
);
}
};
今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码关注公众号。也可以添加 happyzjp 微信受邀加入学习社群，我们会尽力为你解答。练习网站已经正式上线，大家可以登陆网站 http://www.icoderoad.com 进行文章中示例的练习。
京公网安备 11010802041100号