React 之 事件处理与条件渲染

事件处理

需要注意 React 和 DOM 的区别：

• React 事件的命名采用 小驼峰式（camelCase），而不是纯小写；
• 使用 JSX 语法时你需要传入 一个函数 作为事件处理函数，而不像 DOM 那样，是一个字符串；
• 不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault()；

绑定 this 的方法

以下回调函数名称用 handleClick 来表示
方法一：bind

在 constructor 中：

this.handleClick = this.handleClick.bind(this);

方法二：使用 class fields 正确的绑定回调函数

前提：使用实验性的 public class fields 语法，Create React App 默认启用此语法。

 handleClick = () => {
    console.log('this is:', this);
  }

render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }

方法三：在回调中使用箭头函数
当没有使用 public class fields 语法时，可以通过箭头函数确保 handleClick 内的 this 已被绑定。

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }
}

由于每次渲染 LoggingButton 时都会创建不同的回调函数，因此，如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染，所以推荐使用 public class fields 语法来避免性能问题。

条件渲染

if

最简单的条件渲染方式，也很方便，但还有更为简捷的语法；

与运算符 &&

在 JavaScript 中，true && expression 总是会返回 expression, 而 false && expression 总是会返回 false；

因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。

三元运算符

 condition ? true : false

组织组件渲染

让 render 方法直接返回 null，而不进行任何渲染。