react学习笔记---react部分

1，性能优化
https://react.css88.com/docs/optimizing-performance.html#examples
2，组件，state(状态) 和 props(属性)的理解
每当你对 JavaScript 中的某些东西感到困惑时，查阅 MDN 和 javascript.info
社区支持论坛

3，state(状态) 更新可能是异步的
this.props 和 this.state 可能是异步更新的

// 错误
this.setState({
  counter: this.state.counter + this.props.increment,
});

要解决这个问题，应该使用第 2 种 setState() 的格式，它接收一个函数，而不是一个对象。该函数接收前一个状态值作为第 1 个参数，并将更新后的值作为第 2 个参数:

// 正确
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

4，事件处理
在 React 中你不能通过返回 false 来阻止默认行为。必须明确调用 preventDefault 。

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

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

对于纯 HTML ，要阻止链接打开一个新页面的默认行为，可以这样写

<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>

在 JavaScript 中， true && expression 总是会评估为 expression ，而 false && expression 总是执行为 false 。

5，keys 只在数组的上下文中存在意义。
select 标签中使用了一个 value 属性

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

您可以将一个数组传递给 value 属性，允许你在 select 标签中选择多个选项

<select multiple={true} value={['B', 'C']}>

6，组合

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}
function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
      {props.children}
    </FancyBorder>
  );
}

class SignUpDialog extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);
    this.state = {login: ''};
  }

  render() {
    return (
      <Dialog title="Mars Exploration Program"
              message="How should we refer to you?">
        <input value={this.state.login}
               onChange={this.handleChange} />

        <button onClick={this.handleSignUp}>
          Sign Me Up!
        </button>
      </Dialog>
    );
  }

  handleChange(e) {
    this.setState({login: e.target.value});
  }

  handleSignUp() {
    alert(`Welcome aboard, ${this.state.login}!`);
  }
}

react学习笔记---react部分

猜你喜欢