JavaScript 和 React，React用了大量文法糖，讓JS編寫更方便。

標籤：cycle   child   ffffff   list   function   bcf   item   編譯器   20px   

https://reactjs.org/docs/jsx-in-depth.html

JSX in Depth

 

https://babeljs.io/  JS編譯器,學習react和JS直接的轉換。

 JSX僅支援句法糖syntactic sugar:

 

React.createElement(component, props, ...children)函數,

JSX code:

<MyButton color="blue" shadowSize={2}> Click Me</MyButton> 

 編譯compiles into:

React.createElement(

  MyButton,  {color: ‘blue‘, shadowSize: 2},  ‘Click Me‘)   

 

也可以使用self_closing form of the tag if there are no children. So:

<div className="sidebar" />

compiles into:

React.createElement(  ‘div‘,  {className: ‘sidebar‘},  null)

 

函數形式的：

function hello() {

  return <div>Hello world!</div>; 

} 

轉換為：

function hello() {  return React.createElement(    ‘div‘,    null,    ‘Hello world!‘  );}

關於React元素的格式： 

 

React 一定在Scope內。

 

使用. Dot Notaiton ,可以在JSX中使用點符號。如果一個模組要調出一些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" />;}

 

自訂的組件必須首字母大寫(除非分配它一個首字母大寫的變數)。function Hello(props){...} 

 

在運行時選擇類型Choosing the type at runtime 

不能把運算式用做React element type。但是可以把它分配給一個大寫字母的變數，然後就可以間接用JSX格式了

 

import React from ‘react‘;import { PhotoStory, VideoStory } from ‘./stories‘;const components = {  photo: PhotoStory,  video: VideoStory};function Story(props) {  // Wrong! JSX type can‘t be an expression.  return <components[props.storyType] story={props.story} />;}function Story(props) {  // Correct! JSX type can be a capitalized variable.  const SpecificStory = components[props.storyType];  return <SpecificStory story={props.story} />;}

 

 Props in JSX

 

通過{}, 任何JS expression 都可以作為props. 例如<MyComponent foo={1 + 2 + 3 + 4} />

 

if statements and for loops 不是JS運算式，不能直接用於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>;}

 

條件判斷 Inline的寫法： 

{true && expression}  //如果是true,則執行運算式。 

{condition ? true : false }

 

防止組件被渲染：

return null; ??，組件的lifecycle 方法鉤子方法，仍然生效componentWillUpdate 和 componentDidUpdate。

 

Children in JSX

 

string Literals

<div>This is valid HTML &amp; JSX at the same time.</div>

&amp; 就是& 

編譯：

React.createElement(  "div",  null,  "This is valid HTML & JSX at the same time.");

JSX移除一行開頭和結尾的空格

 

JSX Children

支援內嵌JSX元素作為孩子。在嵌套組件中很有用。

React組件也返回數組元素。return [, ,]; 

 

JS expression也可以作為孩子。

function Item(props) {  return <li>hello, {props.message}</li>;  //props.children}function TodoList() {  const todos = [‘finish‘, ‘submit ‘, ‘review‘];  return (    <ul>

//這個是函數作為props.children。 

      {todos.map(message =>        <Item key={message} message={message} />      )}     </ul>  );}

 

Function as Children 

 見標黃的代碼.React.createElement(component, props,...child)

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}>{index}:This is item {index}</div>}    </Repeat>  );}

 

Booleans, Null, and Undefined are Ignored. 

false ,null, undefined, true都是驗證的孩子，不過它們不渲染。

所以可以作為條件判斷 condition && expression。

如果showHeader是true則渲染<Header />

<div>  {showHeader && <Header />}  <Content /></div>

?? 0會被渲染

如果要讓true渲染使用類型轉換,String()。 

 

 

 

  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>;}z

 

JavaScript 和 React，React用了大量文法糖，讓JS編寫更方便。