React(精读官方文档) -高级指引 - 深入 JSX

深入 JSX

概述

• jsx 本质是React.createElement(component, props, …children)的语法糖
• component 指定 React 元素的类型
• React 必须在作用域内
• 在 JSX 类型中可以使用点语法
• 不能将通用表达式作为 React 元素类型
• js表达式可以作为props传递给 jsx
• Props 默认值为 “True”
• 布尔类型、Null 以及 Undefined 不会被渲染

React.createElement(component, props, …children)语法糖

	//如下 JSX 代码：
	<MyButton color="blue" shadowSize={2}>
	  Click Me
	</MyButton>
    
    //会编译为：
    React.createElement(
	  MyButton,
	  {color: 'blue', shadowSize: 2},
	  'Click Me'
	)
	
		//如果没有子节点，你还可以使用自闭合的标签形式，如：
	  <div className="sidebar" />
	  //会编译为:
	  React.createElement(
		  'div',
		  {className: 'sidebar'}
		)

指定 React 元素类型

• JSX 标签的第一部分指定了 React 元素的类型，大写字母开头的 JSX 标签意味着它们是 React 组件

React 必须在作用域内

• 由于 JSX 会编译为 React.createElement 调用形式，所以 React 库也必须包含在 JSX 代码作用域内

   //在如下代码中，虽然 React 和 CustomButton 并没有被直接使用，但还是需要导入：
     import React from 'react';
     import CustomButton from './CustomButton';
     
     function WarningButton() {
       // return React.createElement(CustomButton, {color: 'red'}, null);
       return <CustomButton color="red" />;
     }
  

在 JSX 类型中使用点语法

• 以使用点语法来引用一个 React 组件
• 你在一个模块中导出许多 React 组件时，这会非常方便哦

     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" />   
    }
  

用户定义的组件必须以大写字母开头

• 以小写字母开头的元素代表一个 HTML 内置组件
  • 如 div 标签 会编译为 React.createElement(div)
• 大写字母开头的元素则对应着在 JavaScript 引入或自定义的组件
  • 如 Foo 标签 会编译为 React.createElement(Foo)

   import React from 'react';
  
  // 正确！组件需要以大写字母开头：
  function Hello(props) {
    // 正确！ 这种 <div> 的使用是合法的，因为 div 是一个有效的 HTML 标签：
    return <div>Hello {props.toWhat}</div>;
  }
  
  function HelloWorld() {
    // 正确！React 知道 <Hello /> 是一个组件，因为它是大写字母开头的：
    return <Hello toWhat="World" />;
  }
  

在运行时选择类型

• 不能将通用表达式作为 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} />;
     }
    
    //正确写法：
    function Story(props) {
       // 正确！JSX 类型可以是大写字母开头的变量。
       const SpecificStory = components[props.storyType];
       return <SpecificStory story={props.story} />;
   }
  

JavaScript 表达式作为 Props

• 可以把包裹在 {} 中的 JavaScript 表达式作为一个 prop 传递给 JSX 元素

   <MyComponent foo={1 + 2 + 3 + 4} />
  

• if 语句以及 for 循环不是 JavaScript 表达式，所以不能在 JSX 中直接使用,但可以用在 JSX 以外的代码中

  function NumberDescriber(props) {
     let description;
     if (props.number % 2 == 0) {
       description = <strong>even</strong>;
     } else {
       description = <i>odd</i>;
     }
     return <div>{props.number} is an {description} number</div>;
   }
  

字符串字面量

• 可以将字符串字面量赋值给 prop

  //等价
  <MyComponent message="hello world" />
  
  <MyComponent message={'hello world'} />
  

• 将字符串字面量赋值给 prop 时，它的值是未转义的

  //等价
   <MyComponent message="&lt;3" />
  
  <MyComponent message={'<3'} />
  

Props 默认值为 “True”

• 如果没给 prop 赋值，它的默认值是 true

  //等价
   <MyTextBox autocomplete />
  <MyTextBox autocomplete={true} />
  

展开属性

• 可以使用展开运算符 … 来在 JSX 中传递整个 props 对象

   function App1() {
      return <Greeting firstName="Ben" lastName="Hector" />;
  }
    
    function App2() {
      const props = {firstName: 'Ben', lastName: 'Hector'};
      return <Greeting {...props} />;
    }
  

JSX子元素

• 字符串字面量

  <MyComponent>Hello world!</MyComponent>
  

• 子元素允许由多个 JSX 元素组成

   <MyContainer>
     <MyFirstComponent />
     <MySecondComponent />
   </MyContainer>
  

• JavaScript 表达式作为子元素,使用 {} 包裹

  //等价
  <MyComponent>foo</MyComponent>
  
  <MyComponent>{'foo'}</MyComponent>
  
  function Item(props) {
   return <li>{props.message}</li>;
  }
  
  function TodoList() {
   const todos = ['finish doc', 'submit pr', 'nag dan to review'];
   return (
     <ul>
       {todos.map((message) => <Item key={message} message={message} />)}
     </ul>
   );
  }
  

• 函数作为子元素

   // 调用子元素回调 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>
   );
  }
  //可以将任何东西作为子元素传递给自定义组件，只要确保在该组件渲染之前能够被转换成 React 理解的对象。这种用法并不常见，但可以用于扩展 JSX。
  

• 布尔类型、Null 以及 Undefined 将会忽略，不会被渲染。如果你想渲染 false、true、null、undefined 等值，需要先将它们转换为字符串：

  <div>
     My JavaScript variable is {String(myVariable)}.
   </div>