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

标签：cycle   child   ffffff   list   function   bcf   item   编译器   20px   

JSX in Depth

 JSX仅支持句法糖syntactic sugar:

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

JSX code:

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

 编译compiles into:

React.createElement(

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

<div className="sidebar" />

compiles into:

函数形式的：

function hello() {

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

} 

转换为：

关于React元素的格式： 

React 一定在Scope内。

使用. Dot Notaiton ,可以在JSX中使用点符号。如果一个模块要调出一些React组件，这样就方便了。例子：

自定义的组件必须首字母大写(除非分配它一个首字母大写的变量)。function Hello(props){...} 

在运行时选择类型Choosing the type at runtime 

不能把表达式用做React element type。但是可以把它分配给一个大写字母的变量，然后就可以间接用JSX格式了

 Props in JSX

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

if statements and for loops 不是JS表达式，不能直接用于JSX。但{}就能用了

条件判断 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; 就是& 

编译：

JSX移除一行开头和结尾的空格

JSX Children

支持内嵌JSX元素作为孩子。在嵌套组件中很有用。

React组件也返回数组元素。return [, ,]; 

JS expression也可以作为孩子。

//这个是函数作为props.children。 

Function as Children 

 见标黄的代码.React.createElement(component, props,...child)

Booleans, Null, and Undefined are Ignored. 

false ,null, undefined, true都是验证的孩子，不过它们不渲染。

所以可以作为条件判断 condition && expression。

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

?? 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编写更方便。

标签：cycle   child   ffffff   list   function   bcf   item   编译器   20px   

原文地址：https://www.cnblogs.com/chentianwei/p/8960912.html