【青训营】- React · JSX语法从React用户的视角来看,React最大的特点之一就是JSX 在JSX 语法中

从React用户的视角来看,React最大的特点之一就是JSX

在JSX 语法中，你可以在大括号内{}放置任何有效的 JavaScript 表达式; 换而言之, React会执行{ }中的代码。

而 JSX 本身就是 React.creatElement(component, props, ...children) 表达式的语法糖, 因此在{}内可以写JSX; 所以说,React组件在渲染动态组件方面有天然的优势.

深入JSX

tips: JSX使用注意事项:

React 必须在作用域内
用户定义的组件必须以大写字母开头
属性命名采用小驼峰式（camelCase），而不是纯小写

函数

  const user = {
    firstName: 'react',
    lastName: 'jsx',
  }
  function getName({ firstName, lastName }) {
    return firstName + ' ' + lastName
  }
  return (
    <div>{getName(user)}</div>
  )

对象

  const great = <p>good</p>
  return (
    <div>{great}</div>
  )

条件语句

const show = true;
const greet = <div>good</div>;
const jsx = (
  <div>
    {/* 条件语句 */}
    {show ? greet : "Welcome to JSX"}
    {show && greet}
  </div>
);

数组

const a = [0, 1, 2];
const jsx = (
  <div>
    {/* 数组 */}
    <ul>
      {/* diff时候，⾸先⽐较type，然后是key，所以同级同类型元素，
key值必须得 唯⼀ */}
      {a.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  </div>
);

codepen