JavaScript 和 React，React用了大量语法糖，让JS编写更方便。

Posted 2020-11-01 Mr-chen

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