React--jsx

jsx 介绍

jsx 是javascript的语法扩展，虽然看起来像是模板语法，其实内部完全是javascript实现的

react认为渲染逻辑的本质与ui逻辑是一致的： 如何处理事件、如何显示数据与页面如何布局、如何展示页面是同一等级的问题

react不是将标记和逻辑通过拆分文件来解耦合，而是将问题拆分成组件来解耦合

react不是必须使用jsx，但是通过jsx可以更好的获得视觉辅助，以及显示更多有用的错误和警告消息

jsx本质

jsx本质是objects，babel转译器会将jsx转义成 React.createElement(component, props, …children) 的形式，所以在编写组件的时候，需要在头部声明React变量，即使没有被直接调用

jsx标签

jsx中 大写开头的jsx标签才会被React解析成组件， 如果你使用了大写开头的标签，那么就要在作用域中声明它

jsx中嵌入表达式

在jsx中可以使用表达式语法

const name = 'world'
const element = <h1>hello {name}!</h1>
const add = (a, b) => a + b
const num = {
  a: 10,
  b: 2
}

ReactDOM.render(
  <div>
    {element}
    <h2>{2 + 2}</h2>
    <h3>{add(num.a, num.b)}</h3>
  </div>, 
  document.getElementById('root'))

jsx本身就是表达式

这意味着 jsx可以被当做函数参数、当做函数返回值、被赋值给变量、在js的逻辑运算中使用

function getBoolean(bool) {
  if (bool) {
    return <h1>true</h1>;
  }
  return <h1>false</h1>;
}

子代

jsx可以相互嵌套，在包含开始和结束标签的jsx表达式中，通过 props.children 来传递，
props.children可以是字符串、另一个jsx表达式、javascript表达式， 甚至是函数。

当props.children 为 false、null、undefined 和 true，虽然都有效，但是并不会被渲染出来，如有需要，应使用string方法转成字符串显示

JavaScript 中的一些 “falsy” 值(比如数字0)，依然会被渲染。 如下，保证 前的表达式为布尔值，即可解决

 <div>
  {props.messages.length > 0 &&
    <MessageList messages={props.messages} />
  }
</div>