React高级指引(1)

深入JSX

JSX是React.createElement(component, props,...children)方法提供的语法糖
首字母大写
<MyComponent />为了和原生标签区别开
在运行时选择类型
你不能使用表达式来作为React元素的标签
可以通过设置变量赋值(变量首字母大写)

import { Photo, Videod } from './storeis'
const components = {
  photo: Photo,
  video: Videod 
}
function Story(props) {
  const Mask = components[props.type]
  return <Mask /> // 注意 此地变量也要是 首字母大写
}

使用JavaScript表达式
字符串常量
你可以将字符串常量作为属性值传递。下面这两个 JSX 表达式是等价的：

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

默认为true
如果你没有给属性传值，它默认为 true。因此下面两个 JSX 是等价的：

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

**一般情况下，我们不建议这样使用，因为它会与 ES6 对象简洁表示法 混淆。比如 {foo} 是 {foo: foo} 的简写，而不是 {foo: true}。这里能这样用，是因为它符合 HTML 的做法。
**
扩展属性

const props = { firstName: 'ben', lastName: 'helo' }
<Greeting {...props} />

当你构建通用容器时，扩展属性会非常有用。然而，这样做也可能让很多不相关的属性，传递到不需要它们的组件中使代码变得混乱。我们建议你谨慎使用此语法。

使用PropTypes检查类型

注意: React.PropTypes 自 React v15.5 起已弃用。请使用 prop-types 库代替,只能在开发模式下进行

import PropTypes from 'prop-types'
calss Greeting extends React.Component {
  render() {
    return (
    <h1>Hello, {this.props.name}</h1>
  )  
}
}
Greeting.propTypes = {
    name: PropTypes.string
}

属性默认值

defaultProps

class Greeting extends React.Component {
  render() {
    return (<h1> {this.props.name}</h1>)
  }
}
// 为属性指定默认值
Greeting.defaultProps = {
  name: '默认值'
}

类型检查也会应用到defaultProps上

静态类型检查

Flow

TypeScript