React

React

jsx注意事项：

1、只能返回一个根元素

可以拿<div>把元素包起来，也可以拿<></>把元素包起来，确保单一元素

tips：为什么要单一元素？

JSX 虽然看起来很像 HTML，但在底层其实被转化为了 JavaScript 对象，你不能在一个函数中返回多个对象，除非用一个数组把他们包装起来。这就是为什么多个 JSX 标签必须要用一个父元素或者 Fragment 来包裹。

2、标签必须闭合

3、使用驼峰命名法给大部分属性命名

变量名称不能包含“-”符号或者sads 这样的保留字，在React中使用className代替

4、{}和vue里的{{}}差不多

Props：

1、将props传递给子组件

function Profile({name,sex}) {
  return (
    <div className="card">
      <Avatar name={name} sex={sex} />
    </div>
  );
}

以上是正常写法

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

以上是props过多，使用的更为简洁的“展开”语法

2、在子组件中读取props

function Child({person}){
    //person现在是可以访问的
}

渲染列表：

1、Fragment 语法的简写形式 <> </> 无法接受 key 值，所以你只能要么把生成的节点用一个 <div> 标签包裹起来，要么使用长一点但更明确的 <Fragment> 写法：

import { Fragment } from 'react';

// ...

const listItems = people.map(person =>
  <Fragment key={person.id}>
    <h1>{person.name}</h1>
    <p>{person.bio}</p>
  </Fragment>
);

组件纯粹：

1、纯函数：组件作为公式

纯函数特征：只负责自己的任务；输入相同，则输出相同

2、局部mutation，每次渲染时，只在函数内创建变量并更改他

添加交互：

1、响应事件：

1、可以通过在事件名称末尾添加 Capture来