JSX

    1. const element = <h1>Hello, world!</h1>;

    • 使用JSX的原因。React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。

      1. React [不强制要求](https://zh-hans.reactjs.org/docs/react-without-jsx.html)使用 JSX，但是大多数人发现，在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上 有辅助作用。它还可以使 React 显示更多有用的错误和警告消息。

    • 请注意：变化的方式确定价值传递对象时,可能会导致一些问题:看到警告

    • 注意: 如果你需要阅读超过一看到消费多个上下文，你只能使用这个API订阅一个上下文。 如果您使用的是语法实验公共类字段,你可以使用一个静态类字段初始化contextType
    • 更多信息关于函数作为一个孩子的模式,呈现道具
    • 反应之前附带一个实验性的上下文API。旧的API将支持在所有16。x版本,但使用它的应用程序应该迁移到新版本。遗留的API将被删除在未来主要反应的版本。读遗留环境文档。
    • 请注意：错误边界不捕获错误: 事件处理程序(了解更多) ；异步代码(例如setTimeout或requestAnimationFrame回调) ；服务器端呈现；错误抛出错误边界本身(而不是它的孩子
    • 组件名称显示在堆栈跟踪依赖Function.name属性。如果你支持老式浏览器和设备可能没有提供这个本地(例如(11),考虑包括Function.name polyfill在打包应用程序,比如function.name-polyfill。或者,您可以显式地设置displayName属性你所有的组件
    • 请注意 :第二裁判争论只有当你定义一个组件存在的反应。forwardRef电话。常规函数或类组件不接受裁判争论,和裁判也不是可用的道具。 Ref转发并不局限于DOM组件。你也可以参转发给类组件实例
    • 警告: 自JSX接近比HTML,JavaScript DOM反应使用camelCase属性命名约定,而不是HTML属性名称。 　　 　　例如,类成为JSX className,tabindex变成了tabindex
    • 注意: 在实践中,大多数应用程序反应只叫ReactDOM.render()一次

    • const输出的是元素 ，render后的 输出不需要加括号等。

      1.  Function 输出的是集合，render后的 Welcome 需要加括号等。

      ``` const FancyButton = React.forwardRef((props, ref) => ( ));

    // You can now get a ref directly to the DOM button: const ref = React.createRef();

    ReactDOM.render(, document.getElementById(‘root’))

    function Welcome(props) { return

    Hello, {props.name}

    ; } ReactDOM.render( , document.getElementById(‘root’));

    2. - 注:总组件名称以大写字母开始。 反应将组件以小写字母开始DOM标签。例如,< div / >表示HTML div标记,但<欢迎/ >表示一个组件和需要欢迎范围。 　　 
    3. - 注:总组件名称以大写字母开始。反应将组件以小写字母开始DOM标签。例如,< div / >表示HTML div标记,但<欢迎/ >表示一个组件和需要欢迎范围。 　　 　　
    4. - 请注意 :你可以通过数组值属性,允许您选择多个选项中选择标记:
    5. ```bash
    6. <select multiple={true} value={['B', 'C']}>

    • 1对于任何在React应用程序中更改的数据，都应该有一个单一的“真实来源”。通常，状态首先被添加到需要它进行渲染的组件中。然后，如果其他组件也需要它，您可以将它提升到它们最接近的共同祖先。您应该依赖自顶向下的数据流，而不是尝试在不同组件之间同步状态。

      2提升状态需要编写比双向绑定方法更多的“样板文件”代码，但是作为一个好处，查找和隔离错误所需的工作更 少。由于任何状态“存在于”某个组件中，并且仅此组件就可以更改它，因此大大减少了bug的表面积。此外，您 可以实现任何自定义逻辑来拒绝或转换用户输入。
      3如果某个东西可以从道具或状态中派生出来，那么它可能不应该处于状态。例如，我们不存储celsiusvalue和 fahroheitvalue，只存储最后编辑的温度及其刻度。其他输入的值总是可以在render（）方法中根据它们进行计 算。这允许我们清除或应用舍入到另一个字段，而不会丢失用户输入中的任何精度。
      4当您在UI中看到错误时，可以使用React Developer工具检查属性并向上移动树，直到找到负责更新状态的组件 为止。这可以让你追踪到它们的来源