React官方文档知识点归纳-1

JSX语法：

元素属性名命名规则

• 属性名采用camelCase命名法，比如，类（class）就叫：’className’，tabindex就叫：’tabIndex’。引用

组件

• 命名规则：始终以大写字母开头。引用
• React is pretty flexible but it has a single strict rule : All React components must act like pure functions with respect to their props.

组件状态（state）

• 不要直接修改状态

// 错误的
this.state.comment = 'Hello';

// 正确的
this.setState({comment: 'Hello'});

唯一可以指定this.state的地方是构造函数。

• 因为this.props和this.state可能会异步更新，所以不应该依赖它们的值来计算下一个状态。

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

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

// 正确
this.setState(function(prevState, props) {
  return {
    counter: prevState.counter + props.increment
  };
});

• This is commonly called a “top-down” or “unidirectional” data flow. Any state is always owned by some specific component, and any data or UI derived from that state can only affect components “below” them in the tree.

状态与生命周期（State and Lifecycle）

• componentDidMount()
• componentWillUnmount()

处理事件（Handling Events）

• React事件使用camelCase命名，而不是小写。
• 使用JSX，您将传递一个函数作为事件处理程序，而不是字符串。

For example, the HTML:

<button onclick="activateLasers()">
  Activate Lasers
</button>

in React:

<button onClick={activateLasers}>
  Activate Lasers
</button>

• 另一个区别是你不能返回false来防止React中的默认行为。您必须显式调用preventDefault。例如，对于纯HTML，为了防止打开新页面的默认链接行为，可以这样写：

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

in React:

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

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

条件渲染（Conditional Rendering）

列表和键（Lists and Keys）

• 关于列表中的key的添加的正确用法

//错误的写法
function ListItem(props) {
  const value = props.value;
  return (
    // Wrong! There is no need to specify the key here:
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Wrong! The key should have been specified here:
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

//正确的写法
function ListItem(props) {
  // Correct! There is no need to specify the key here:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Correct! Key should be specified inside the array.
    <ListItem key={number.toString()}
              value={number} />

  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

• key在兄弟元素之间必须是唯一的

• 在JSX中插入map()

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()}
              value={number} />

  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

表单（Forms）

状态提升（Lifting State Up）

构成与继承（Composition vs Inheritance））