React 绑数据注意点

Question

1、组件名称必须以大写字母开头

<Welcome name="Sara" />

2、JSX 语法上更接近 JavaScript 而不是 HTML

所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。

class ---> className
tabindex ---> tabIndex

例外

aria- 
data-

3、Props 的只读性

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

4、正确使用 State

不要直接修改状态

构造函数是唯一可以给 this.state 赋值的地方

//其他地方
// Wrong
this.state.comment = 'Hello';
// Correct
this.setState({comment: 'Hello'});

状态的更新可能是异步的

出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。因为 this.props 和 this.state 可能会异步更新，所以你不要依赖他们的值来更新下一个状态。

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

5、数据是向下流动的

组件可以选择把它的 state 作为 props 向下传递到它的子组件中：

<FormattedDate date={this.state.date} />

6、注意回调中的 this

bind

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

class fields (实验性的语法)【Create React App 默认启用此语法】

class LoggingButton extends React.Component {
  // 此语法确保 `handleClick` 内的 `this` 已被绑定。
  // 注意: 这是 *实验性* 语法。
  handleClick = () => {
    console.log('this is:', this);
  }

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

在回调中使用箭头函数（避免使用)

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

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

7、向事件处理传递参数

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
//e 必须显式的进行传递

<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
//事件对象 e 以及更多的参数将会被隐式的进行传递。

8、key

key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。

一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串，避免使用列表项的 index 作为 key

9、for 在 JSX 中应该被写作 htmlFor

<label htmlFor="namedInput">Name:</label>
<input id="namedInput" type="text" name="name"/>

10、将所有 props 向下传递

//Button
return (<button {...this.props} />)
//使用
<Button>点击</Button>
//渲染
<button>点击</button>   //this.props.children 自动渲染进去

11、v-show?

<div>
  {showHeader && <Header />}
  <Content />
</div>

12、值得注意的是有一些 falsy 值，如数字 0，仍然会被 React 渲染。

例如，以下代码并不会像你预期那样工作，因为当 props.messages 是空数组时，0 仍然会被渲染：

<div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

改

<div>
  {props.messages.length > 0 &&     //确定是布尔值
    <MessageList messages={props.messages} />
  }
</div>

13、非受控默认值

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Name:
        <input
          defaultValue="Bob"
          type="text"
          ref={this.input} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}
//defaultChecked
//defaultValue

14、onChange

每当表单字段变化时，该事件都会被触发。类似于 oninput