React 文档 Part 2

—— 事件处理、

此文档来自 React 官方文档，在英文原文的基础上进行了增删改，用于我本人的研究与学习，暂不支持转载。因为本人的水平问题，来取经的同学也请慎用。

事件处理

React 元素的事件处理与 DOM 元素的世界处理很相似，这里有几点语法上的不同点：

• React 事件使用驼峰法命名而不是全部小写。
• 使用 JSX 时传递一个函数作为事件处理方法而不是一个字符串。

比如，使用 HTML：

  Activate Lasers

与 React 有些许不同：

  Activate Lasers

另一个不同点是，你不可以使用返回 false 的方法来阻止默认行为。需要调用 preventDefault() 方法。比如，对于纯 HTML 来说，为了防止链接打开新页面的默认行为，你可以写：

  Click me

在 React 中，替代方法如下：

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    
      Click me
    
  );
}

在此，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 (
        
          {this.state.isToggleOn ? 'ON' : 'OFF'}
        );
    }
}

ReactDOM.render (
  ,
  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 (
      
        Click me
      
    );
  }
}

这种格式在 Create React App中是默认可用的。

如果你不想使用类字段格式，你可以在回调函数中使用箭头格式：

class LoggingButton extends React.Component {
  handleClick() {
    console.log ('this is"', this);
  }
  render () {
    // 这种格式可以确保 this 与 handleClick 绑定
    return (
       this.handleClick(e)}>
        Click me
      
    );
  }
}

这种格式带来的问题是当每次 LoggingButton 渲染时都会创建不同的回调函数。在大多数的场景里，这是没问题的。然而，如果这个回调函数是作为一个 属性 被传递到下层的组件中，这些组件可能会额外做一次渲染。我们通常推荐前两种方法，来避免问题。

向事件处理器传递参数

在循环中，通常都需要向每个事件处理方法中传入一个额外的计数参数。如下所示，假设 id 是行ID，下面两种方法都可以正常运行：

 this.deleteRow(id. e)}> Delete Row
Delete Row

上面这两种是等价的，各自使用了箭头函数和 Function.prototype.bind。

在这两种方法中，参数 e 会作为在 ID 之后的第二个参数传入 React 事件中。在箭头函数中，我们必须明确地传给它，但是使用 bind 时，多余的参数会自动传入。

条件渲染

在 React 中，你可以创建不同的组件来封装你想要完成的行为。然后你可以渲染其中的部分，决定于你组件的 state。

React 中的条件渲染的工作原理和 JavaScript 中的条件判断相同。使用 JavaScript 操作符类似 if 和 条件操作符来创建由当前状态决定的元素，然后让 React 更新 UI 来匹配它们。

查看下面两个组件：

function UserGreeting (props) {
  return 
Welcome back!
;
}
function GusetGreeting (props) {
  return 
Please sign up.
}

我们创建了一个 Greeting 组件，其最终展示的内容决定于哪个用户进行了登录：

function Greeting (props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return ;
  }
  return ;
}

ReactDOM.render(
  // Try changing to isLoggedIn = {true}
  ,
  document.getElementById('root')
);

在这个例子中，渲染哪个问候语句取决于属性 isLoggedIn 的值。

元素变量

你可以使用变量来存储元素。这可以帮助你在其他部分的输出不变的情况下条件渲染一部分组件。

来看下面两个新组件，分别为登录和登出按钮。

function LoginButton(props) {
  return (
    
  );
}
function LogoutButton(props) {
  return (
    
      Logout
    
  );
}

在下面这个例子中，我们创建一个包含状态的组件 LoginControl。

这个组件会根据当前的状态来渲染 或者 。同时也会渲染前面例子中的 组件。

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 = ;
    } else {
      button = ;
    }

  return (
    

      
    );
  }
}

ReactDOM.render(
  ,
  document.getElementById('root')
);

定义一个变量，使用 if 条件判断是条件渲染组件的一种很好的方法，有时你可能想要使用更简洁的格式。下面有几种在 JSX 中使用条件判断的例子。

内联 if 和 逻辑 && 运算符

你可以在 JSX 中嵌入任何表达式，当然也包括 JavaScript 的 逻辑运算符 &&。可以方便地在一个元素中使用条件渲染：

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    

      
Hello!
      {unreadMessages.length > 0 &&
        

          You have {unreadMessages.length} unread messages.
        
      }
    
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  ,
  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 (
    

      The user is {isLoggedIn ? 'currently' : 'not'} logged in.
    
  );
}

它同样可以在大一点的表达式中使用，虽然它的可读性差一些。

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    

      {isLoggedIn ? (
        
      ) : (
        
      )}
    
  );
}

就像在 JavaScript 中一样，你和你的团队可以根据可读性的需求来选择不同的方法。同样记住一点就是，如果条件变得很复杂，就该分离组件了。

让组件不被渲染

在有些情况下，你可能想要组件被渲染后隐藏。想要实现只需要返回 null 而不是它的输出。
在下面这个例子中， 是否渲染是由其属性 warn 的值决定的，如果这个属性的值是 false的，组件就不会渲染：

function WarningBanner (props) {
  if(!props.warn) {
    return null;
  }
  return (
    

      Warning!
    
  );
}

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 (
      

        
        
          {this.state.showWarning ? 'Hide' : 'Show'}
        
      
    );
  }
}

ReactDOM.render (
  ,
  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 数组，每项返回一个

元素，并且将其放入 listItems中：

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => 
  
{number}
);

我们把整个 listItems 数组放在一个

元素中，并且将其渲染到 DOM 中：

ReactDOM.render(
  
{listItems}
,
  document.getElementById('root')
);

这段代码会展示从1到5的列表。

基本的列表组件

通常情况下，你要在组件里渲染列表。

我们可以在组件中重构上面的代码，组件接受一个数字数组，然后输出一个无序列表元素。

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) => 
    
{number}
  );
  return (
    
{listItems}
  );
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render (
  ,
  documents.getElementById('root')
);

当你运行这段代码，你会得到一个警告：你应该给列表中的每一项赋予一个 键（key）。键 是一个特殊的字符串属性，当你创建一个元素列表时，每一个元素都应该拥有。在下一节中我们会讨论键为什么这么重要。

我们给 numbers.map() 中的每一个元素分配一个 key 来解决 key 的问题：

function NumberList (props) {
  const numbers = props.numbers;
  const listItems = number.map((number) => 
    

      {number}
    
  );
  return (
    
{listItems}
  );
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render (
  ,
  document.getElementById('root')
);

键 Key

Key 可以帮着 React 识别哪些项发证了改变，被添加，或被移除。每个数组中的元素都应该赋予一个 key 来给予他们一个稳定的标志：

const numbers = [1, 2, 3, 4, 5];
const listItens = numbers.map((number) => 
  

    {number}
  
);

选取 key 值的最好方法是使用一个不同于其兄弟节点的字符串来进行标识。通常会使用数据的 ID 值。

const todoItems = todos.map((todo) =>
  

    {todo.text}
  
);

如果你要渲染的项没有一个稳定的 ID 值，那么你可以使用项的索引来当做 key：

const todoItems = todos.map((todo, index) => 
  // 只用在项没有稳定的 ID 情况下
  

    {todo.text}
  
);

我们不推荐在项可能被重新排序的情况下使用索引来作为 key 值，因为那样会降低效率。如果感兴趣的话你也可以查看 key 值重要的深层次原因。

** To Be Continued...**