初学react

参考：https://doc.react-china.org/

1、JSX扩展属性

如果你已经有了个 props 对象，并且想在 JSX 中传递它，你可以使用 ... 作为扩展操作符来传递整个属性对象。下面两个组件是等效的：

function App1() {

 return <Greeting firstName="Ben" lastName="Hector" />;

}

function App2() {

 const props = {firstName: 'Ben', lastName: 'Hector'};

 return <Greeting {...props} />;

}

2、React 组件也可以通过数组的形式返回多个元素：

render() {
  // 不需要使用额外的元素包裹数组中的元素
  return [
    // 不要忘记 key :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];

}

3、JavaScript 表达式

你可以将任何 {}包裹的 JavaScript 表达式作为子代传递。

function Item(props) {  return <li>{props.message}</li>;
}

function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
    <ul>      {todos.map((message) => <Item key={message} message={message} />)}
    </ul>
  );
}

4、布尔值、Null 和 Undefined 被忽略

false、null、undefined和 true都是有效的子代，但它们不会直接被渲染。下面的表达式是等价的：

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>
这在根据条件来确定是否渲染React元素时非常有用。以下的JSX只会在showHeader为true时渲染<Header />组件：

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

相反，如果你想让类似  false 、 true 、 null 或  undefined 出现在输出中，你必须先把它 转换成字符串：

<div>
  My JavaScript variable is {String(myVariable)}.
</div>

5、for循环DOM时，key的重要性

比如循环出来为：<Item key='1'/><Item key='2'/><Item key='3'/>

每个都必须有一个唯一key属性来识别，不然控制台会报警告，如果有一些对应性的操作也会有bug，另外在其他地方调用这个组件时，使用this.props.key是拿不到值的，得到的是undefined。

6、JSX里写style时

必须是<ul style={{backgroundColor : 'red'}}></ul>的形式，嵌套两个大括号，

另外必须是驼峰式的写法，比如zIndex、marginTop等，

如果碰到-webkit-、-ms-前缀时，一律变为开头大写Webkit,除了ms除外。

未完待续。。。 :