—— 事件处理、
此文档来自 React 官方文档，在英文原文的基础上进行了增删改，用于我本人的研究与学习，暂不支持转载。因为本人的水平问题，来取经的同学也请慎用。
事件处理
React 元素的事件处理与 DOM 元素的世界处理很相似，这里有几点语法上的不同点：
- React 事件使用驼峰法命名而不是全部小写。
- 使用 JSX 时传递一个函数作为事件处理方法而不是一个字符串。
比如，使用 HTML：
<button onclick="activateLasers()">
Activate Lasers
</button>
与 React 有些许不同：
<button onClick={activateLasers}>
Activate Lasers
</button>
另一个不同点是，你不可以使用返回 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 组件渲染了一个按钮，可以让用户在 ON 和 OFF 之间转换。
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 的含义。在 JavaScript 中，类方法通常都不会自动绑定。如果你忘了绑定 this.handleClick 而且将其传递给 onClick，当函数被调用时，this 就会是 undefined。
这不是 React 的特殊行为；这是 JavaScript 函数工作原理的一部分。通常情况下，如果你更喜欢调用不带()的方法，例如 onClick = {this.handleClick}，你应该绑定方法。
如果决定 bind 很烦的话，下面有两个变通方法。如果你使用尚在实验的 public class fields syntax，你可以使用 类字段（class fields）来正确地绑定回调函数：
class LoggingButton extends React.Component {
// This syntax ensures `this` is bound within handleClick.
// Warning: this is *experimental* syntax.
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 与 handleClick 绑定
return (
<button onClick={(e) => this.handleClick(e)}>
Click me
</button>
);
}
}
这种格式带来的问题是当每次 LoggingButton 渲染时都会创建不同的回调函数。在大多数的场景里，这是没问题的。然而，如果这个回调函数是作为一个 属性 被传递到下层的组件中，这些组件可能会额外做一次渲染。我们通常推荐前两种方法，来避免问题。
向事件处理器传递参数
在循环中，通常都需要向每个事件处理方法中传入一个额外的计数参数。如下所示，假设 id 是行ID，下面两种方法都可以正常运行：
<button onClick={(e) => this.deleteRow(id. e)}> Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
上面这两种是等价的，各自使用了箭头函数和 Function.prototype.bind。
在这两种方法中，参数 e 会作为在 ID 之后的第二个参数传入 React 事件中。在箭头函数中，我们必须明确地传给它，但是使用 bind 时，多余的参数会自动传入。
条件渲染
在 React 中，你可以创建不同的组件来封装你想要完成的行为。然后你可以渲染其中的部分，决定于你组件的 state。
React 中的条件渲染的工作原理和 JavaScript 中的条件判断相同。使用 JavaScript 操作符类似 if 和 条件操作符来创建由当前状态决定的元素，然后让 React 更新 UI 来匹配它们。
查看下面两个组件：
function UserGreeting (props) {
return <h1>Welcome back!</h1>;
}
function GusetGreeting (props) {
return <h1>Please sign up.</h1>
}
我们创建了一个 Greeting 组件，其最终展示的内容决定于哪个用户进行了登录：
function Greeting (props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <userGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
// Try changing to isLoggedIn = {true}
<Greeting isLoggedIn = {false} />,
document.getElementById('root')
);
在这个例子中，渲染哪个问候语句取决于属性 isLoggedIn 的值。
元素变量
你可以使用变量来存储元素。这可以帮助你在其他部分的输出不变的情况下条件渲染一部分组件。
来看下面两个新组件，分别为登录和登出按钮。
function LoginButton(props) {
return (
<button ocClick={props.onClick}
Login
</button>
);
}
function LogoutButton(props) {
return (
<button onClick={props.onClick}>
Logout
</button>
);
}
在下面这个例子中，我们创建一个包含状态的组件 LoginControl。
这个组件会根据当前的状态来渲染 <LoginButton /> 或者 <LogoutButton />。同时也会渲染前面例子中的 <Greeting /> 组件。
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bing(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false});
}
render () {
const isLoggedIn = this.state.isLoggedIn;
let button = null;
if (isLoggedIn) {
button = <LogoutButton onClick = {this.handleLogoutClick} />;
} else {
button = <LoginButton onClick = {this.handleLoginClick} />;
}
return (
<div>
<Greeting isLoggedIn = {isLoggedIn}
{button}
</div>
);
}
}
ReactDOM.render(
<LoginControl />,
document.getElementById('root')
);
定义一个变量，使用 if 条件判断是条件渲染组件的一种很好的方法，有时你可能想要使用更简洁的格式。下面有几种在 JSX 中使用条件判断的例子。
内联 if 和 逻辑 && 运算符
你可以在 JSX 中嵌入任何表达式，当然也包括 JavaScript 的 逻辑运算符 &&。可以方便地在一个元素中使用条件渲染：
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}
const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
<Mailbox unreadMessages={messages} />,
document.getElementById('root')
);
在 JavaScript 中可以这样用，因为 true && expression 的值总是决定于 expression，false && expression 的值总是 false。
因此，如果条件判断为 true，元素右边 && 之后的会在输出中显示。如果条件判断为 false，React 会忽略后面的值。
内联 If-Else 与条件运算符
另一个内联的方法是使用 condition ? true : false 条件运算符。
在下面这个例子中，我们使用这种方法渲染一小段文字：
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
它同样可以在大一点的表达式中使用，虽然它的可读性差一些。
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<LogoutButton onClick={this.handleLogoutClick} />
) : (
<LoginButton onClick={this.handleLoginClick} />
)}
</div>
);
}
就像在 JavaScript 中一样，你和你的团队可以根据可读性的需求来选择不同的方法。同样记住一点就是，如果条件变得很复杂，就该分离组件了。
让组件不被渲染
在有些情况下，你可能想要组件被渲染后隐藏。想要实现只需要返回 null 而不是它的输出。
在下面这个例子中，<WarningBanner /> 是否渲染是由其属性 warn 的值决定的，如果这个属性的值是 false的，组件就不会渲染：
function WarningBanner (props) {
if(!props.warn) {
return null;
}
return (
<div className = "warning">
Warning!
</div>
);
}
class Page extends React.Component {
constructor() {
super(props);
this.state = {showWarning: true};
this.handleToggleClick = this.handleToggleClick.bind(this);
}
handleToggleClick () {
this.setState(prevState => ({showWarning: !prevState.showWarning}));
}
render() {
return (
<div>
<WarningBanner warn = {this.state.showWarning} />
<button onClick = {this.handleToggleClick}>
{this.state.showWarning ? 'Hide' : 'Show'}
</button>
</div>
);
}
}
ReactDOM.render (
<Page />,
document.getElementById('root')
);
在组件的 render 方法中返回 null 并不会影响组件的生命周期方法。例如，componentDidUpdate 和 componentWillUpdate 仍然会调用。
列表和值
首先我们来回顾一下在 JavaScript 中你是如何处理列表的。
查看下面的代码，我们使用 map() 函数将 numbers 的
每个数字double。我们将 map() 的返回值赋值给 doubled 然后输出：
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log (doubled);
这段代码会在控制台输出 [1, 4, 6, 8, 10];
在 React 中，将数组转换为元素列表也是与之类似的。
渲染多个组件
你可以创建多个元素并且用 {} 将他们放在 JSX 中。
在下面，我们使用 JavaScript 的 map() 函数来循环 numbers 数组，每项返回一个 <li> 元素，并且将其放入 listItems中：
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li>{number}</li>
);
我们把整个 listItems 数组放在一个 <ul> 元素中，并且将其渲染到 DOM 中：
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('root')
);
这段代码会展示从1到5的列表。
基本的列表组件
通常情况下，你要在组件里渲染列表。
我们可以在组件中重构上面的代码，组件接受一个数字数组，然后输出一个无序列表元素。
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li>{number}</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render (
<NumberList numbers = {number} />,
documents.getElementById('root')
);
当你运行这段代码，你会得到一个警告：你应该给列表中的每一项赋予一个 键（key）。键 是一个特殊的字符串属性，当你创建一个元素列表时，每一个元素都应该拥有。在下一节中我们会讨论键为什么这么重要。
我们给 numbers.map() 中的每一个元素分配一个 key 来解决 key 的问题：
function NumberList (props) {
const numbers = props.numbers;
const listItems = number.map((number) =>
<li key = {number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render (
<NumberList numbers = {numbers} />,
document.getElementById('root')
);
键 Key
Key 可以帮着 React 识别哪些项发证了改变，被添加，或被移除。每个数组中的元素都应该赋予一个 key 来给予他们一个稳定的标志：
const numbers = [1, 2, 3, 4, 5];
const listItens = numbers.map((number) =>
<li key = {number.toString()}>
{number}
</li>
);
选取 key 值的最好方法是使用一个不同于其兄弟节点的字符串来进行标识。通常会使用数据的 ID 值。
const todoItems = todos.map((todo) =>
<li key = {todo.id}>
{todo.text}
</li>
);
如果你要渲染的项没有一个稳定的 ID 值，那么你可以使用项的索引来当做 key：
const todoItems = todos.map((todo, index) =>
// 只用在项没有稳定的 ID 情况下
<li key = {index}>
{todo.text}
</li>
);
我们不推荐在项可能被重新排序的情况下使用索引来作为 key 值，因为那样会降低效率。如果感兴趣的话你也可以查看 key 值重要的深层次原因。
** To Be Continued...**
网友评论