React: 浅谈谈 JSX-一一网

什么是 JSX

JSX，是一个 JavaScript 的语法扩展；在 JavaScript 代码中可以直接写 HTML的标记。

const name = "react";
const element = <h1>hello {name}</h1>;
复制代码

JSX 的本质： 它并不是模版引擎，而是动态创建组件的一颗语法糖。

const name = "react";
const element = React.createElement(
  h1, // type
  null, // attribute
  "hello ", // ...children
  name
);
复制代码

如何使用

Expressions： any valid unit of code that resolves to a value.
表达式： 会返回值的任何有效代码单元。

1. `JSX` 本身就是表达式

const element = <h1>hello jsx</h1>;
复制代码

2. 在属性中使用表达式

<h1 foo={1 + 2 + 3 + 4}></h1>
复制代码

3. 支持扩展运算符（…）

const props = { firstName: "", lastName: "" };
<MyComponent {...props} />;
复制代码

4. 表达式作为子元素

props.children 和其他 prop 一样，它可以传递任意类型的数据，而不仅仅是 React 已知的可渲染类型。

例如，如果你有一个自定义组件，你可以把回调函数作为 props.children 进行传递，但要确保返回值必须是可 render 的节点：

// 调用子元素回调 numTimes 次，来重复生成组件
function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );
}
复制代码

这种用法并不常见，但可以用于扩展 JSX。

5. 使用点语法

当你在一个模块中导出许多 React 组件时，这会非常方便。例如，如果 MyComponents.DatePicker 是一个组件，你可以在 JSX 中直接使用：

import React from "react";

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Imagine a {props.color} datepicker here.</div>;
  },
};

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;
}
复制代码

约定

自定义组件使用大写字母开头。

React 默认小写的 tag 为原生 DOM 节点，如 div；
所有大写字母开头的都是自定义组件，React 会去寻找它的定义并 render。

这是不被允许的

不能将通用表达式作为 React 元素类型。

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // 错误！JSX 类型不能是一个表达式。
  return <components[props.storyType] story={props.story} />;
}
复制代码

如果遇到需要根据 prop 来渲染不同组件的情况，可以赋值给大写字母开头的变量

function Story(props) {
  // 正确！JSX 类型可以是大写字母开头的变量。
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}
复制代码