React入门教程（4）React的组件状态及事件处理
React组件的状态state
我们可以通过this.props获取一个组件的属性，另外还可以通过this.state获取组件的私有状态（也就是私有数据）。
构造函数初始化内部的状态
import React, { Component } from 'react'
class Clock extends Component {
constructor(props) {
super(props);
// 构造函数中设置状态
this.state = {
DateStr: new Date().toLocaleDateString()
};
}
render () {
return (
<div>
<p>当前时间是： {this.state.DateStr}</p>
</div>
)
}
}
export default Clock
关于 setState() 这里有三件事情需要知道
不要直接更新状态
例如，此代码不会重新渲染组件：
// Wrong
this.state.comment = 'Hello';
应当使用 setState():
// Correct
this.setState({comment: 'Hello'});
构造函数是唯一能够初始化 this.state 的地方。
状态更新可能是异步的
React 可以将多个setState() 调用合并成一个调用来提高性能。
因为 this.props 和 this.state 可能是异步更新的，你不应该依靠它们的值来计算下一个状态。
例如，此代码可能无法更新计数器：
// Wrong
this.setState({
counter: this.state.counter + this.props.increment,
});
要修复它，请使用第二种形式的 setState() 来接受一个函数而不是一个对象。 该函数将接收先前的状态作为第一个参数，将此次更新被应用时的props做为第二个参数：
// Correct
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));
上方代码使用了箭头函数，但它也适用于常规函数：
// Correct
this.setState(function(prevState, props) {
return {
counter: prevState.counter + props.increment
};
});
状态单独更新和自动合并
当你调用 setState() 时，React 将你提供的对象合并到当前状态。
例如，你的状态可能包含一些独立的变量：
constructor(props) {
super(props);
this.state = {
posts: [],
comments: []
};
}
你可以调用 setState() 独立地更新它们：
componentDidMount() {
fetchPosts().then(response => {
this.setState({
posts: response.posts
});
});
fetchComments().then(response => {
this.setState({
comments: response.comments
});
});
}
这里的合并是浅合并，也就是说this.setState({comments})完整保留了this.state.posts，但完全替换了this.state.comments。
数据自顶向下流动
父组件或子组件都不能知道某个组件是有状态还是无状态，并且它们不应该关心某组件是被定义为一个函数还是一个类。
这就是为什么状态通常被称为局部或封装。 除了拥有并设置它的组件外，其它组件不可访问。
组件可以选择将其状态作为属性传递给其子组件：
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
这也适用于用户定义的组件：
<FormattedDate date={this.state.date} />
FormattedDate 组件将在其属性中接收到 date 值，并且不知道它是来自 Clock 状态、还是来自 Clock 的属性、亦或手工输入：
function FormattedDate(props) {
return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}
这通常被称为自顶向下或单向数据流。 任何状态始终由某些特定组件所有，并且从该状态导出的任何数据或 UI 只能影响树中下方的组件。
如果你想象一个组件树作为属性的瀑布，每个组件的状态就像一个额外的水源，它连接在一个任意点，但也流下来。
为了表明所有组件都是真正隔离的，我们可以创建一个 App 组件，它渲染三个Clock：
function App() {
return (
<div>
<Clock />
<Clock />
<Clock />
</div>
);
}
每个 Clock 建立自己的定时器并且独立更新。 在 React 应用程序中，组件是有状态还是无状态被认为是可能随时间而变化的组件的实现细节。 可以在有状态组件中使用无状态组件，反之亦然。
综合案例自动计时的时钟
import React, { Component } from 'react'
class Clock extends Component {
constructor(props) {
super(props);
this.state = {
DateStr: new Date().toLocaleTimeString(),
timer: null
};
}
componentDidMount() {
this.setState({
timer: setInterval(() => {
this.setState({
DateStr: new Date().toLocaleTimeString()
});
}, 1000)
});
}
componentWillUnmount() {
clearInterval(this.state.timer);
}
render () {
return (
<div>
<p>当前时间是： {this.state.DateStr}</p>
</div>
)
}
}
export default Clock
React的事件处理
React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同:
- React事件绑定属性的命名采用驼峰式写法，而不是小写。
- 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)
JSX语法中使用{}执行js代码。
例如，传统的 HTML：
<button onclick="activateLasers()">
Activate Lasers
</button>
React 中稍稍有点不同：
<button onClick={activateLasers}>
Activate Lasers
</button>
在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为。你必须明确的使用 preventDefault。例如，传统的 HTML 中阻止链接默认打开一个新页面，你可以这样写：
<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
</a>
在 React，应该这样来写：
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
在这里，e 是一个合成事件。React 根据 W3C spec 来定义这些合成事件，所以你不需要担心跨浏览器的兼容性问题。
使用 React 的时候通常你不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器。你仅仅需要在这个元素初始渲染的时候提供一个监听器。
当你使用 ES6 class 语法来定义一个组件的时候，事件处理器会成为类的一个方法。例如，下面的 Toggle 组件渲染一个让用户切换开关状态的按钮：
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);
你必须谨慎对待 JSX 回调函数中的 this，类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。
这并不是 React 的特殊行为；它是函数如何在 JavaScript 中运行的一部分。通常情况下，如果你没有在方法后面添加 () ，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。
如果使用 bind 让你很烦，这里有两种方式可以解决。如果你正在使用实验性的属性初始化器语法，你可以使用属性初始化器来正确的绑定回调函数：
class LoggingButton extends React.Component {
// This syntax ensures `this` is bound within handleClick.
// Warning: 最新的es的语法，暂时是在stage3
handleClick = () => {
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}
这个语法在 Create React App 中默认开启。
如果你没有使用属性初始化器语法，你可以在回调函数中使用 箭头函数：
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
// This syntax ensures `this` is bound within handleClick
return (
<button onClick={(e) => this.handleClick(e)}>
Click me
</button>
);
}
}
使用这个语法有个问题就是每次 LoggingButton 渲染的时候都会创建一个不同的回调函数。在大多数情况下，这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。
demo
import React, { Component } from 'react';
class App extends Component {
constructor(option) {
super(option);
this.handler = this.handler.bind(this);
}
handler(e) {
console.log(e);
console.log(this);
}
hanlderClick = (e) => {
console.log(e);
e.target.innerText = Date.now();
};
handlerButtonClick(e) {
console.log('button click');
}
render() {
return (
<div className="App">
<h1>aicoder.com</h1>
<button onClick={this.hanlderClick}>类对象实例属性箭头函数</button>
<button onClick={this.handler}>构造函数绑定this</button>
<button onClick={this.handlerButtonClick.bind(this)}>直接bind的this</button>
<p onMouseEnter={(e) => {console.log(this); console.log(3);}}>nihao</p>
</div>
);
}
}
export default App;
向事件处理程序传递参数
通常我们会为事件处理程序传递额外的参数。例如，若是 id 是你要删除那一行的 id，以下两种方式都可以向事件处理程序传递参数：
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
上述两种方式是等价的，分别通过 arrow functions 和 Function.prototype.bind 来为事件处理函数传递参数。
上面两个例子中，参数 e 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。
值得注意的是，通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面，例如:
class Popper extends React.Component{
constructor(){
super();
this.state = {name:'Hello world!'};
}
preventPop(name, e){ //事件对象e要放在最后
e.preventDefault();
alert(name);
}
render(){
return (
<div>
<p>hello</p>
{/* Pass params via bind() method. */}
<a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
</div>
);
}
}
