JSX
在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。
例如，2 + 2，user.firstName 或 formatName(user) 都是有效的 JavaScript 表达式。
为了便于阅读，我们会将 JSX 拆分为多行，建议将内容包裹在括号中
你可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX
你可以通过使用引号，来将属性值指定为字符串字面量：
const element = ;
也可以使用大括号，来在属性值中插入一个 JavaScript 表达式：
const element = 
;
在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。你应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，对于同一属性不能同时使用这两种符号。
注意：
因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。
JSX 防止注入攻击
React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击。
JSX 表示对象
Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。
const element = (
Hello, world!
)
//两种代码完全等效
const element = React.createElement(
//接受三个参数，标签名，属性参数对象，子元素
'h1',
{className: 'greeting'},
'Hello, world!'
)
这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。React 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新。
元素渲染
元素是构成 React 应用的最小砖块
与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。
仅使用 React 构建的应用通常只有单一的根 DOM 节点
想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()：
const element = Hello, world
;
ReactDOM.render(element, document.getElementById('root'));
在实践中，大多数 React 应用只会调用一次 ReactDOM.render()
React 只更新它需要更新的部分.
React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。
考虑 UI 在任意给定时刻的状态，而不是随时间变化的过程，能够消灭一整类的 bug
组件&Props
独立，可复用，单独构思
组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。
函数组件与class组件
用函数定义组件
function Welcome(props) {
return Hello, {props.name}
;}
用ES6语法的class定义组件：
class Welcome extends React.Component{
render(){
return Hello, {this.props.name}
}
}
上面两者等效
如何将函数组件转换成class组件：
- 创建一个同名的 ES6 class，并且继承于 React.Component。
- 添加一个空的 render() 方法。
- 将函数体移动到 render() 方法之中。
- 在 render() 方法中使用 this.props 替换 props。
- 删除剩余的空函数声明。
当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）转换为单个对象传递给组件，这个对象被称之为 “props”。
关键词：props
组合组件
组件可以在其输出中引用其他组件。
用同一组件来抽象出任意层次的细节。
通常来说，每个新的 React 应用程序的顶层组件都是 App 组件。
Props的只读性
组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。
纯函数：不会尝试更改入参，且多次调用下相同的入参始终返回相同的结果。
React 非常灵活，但它也有一个严格的规则：所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。
State&生命周期
State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件。
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()}; }
render() {
return (
Hello, world!
It is {this.state.date.toLocaleTimeString()}.
)
}
}
ReactDOM.render(
Class 组件应该始终使用 props 参数来调用父类的构造函数。
class 组件声明一些特殊的方法，当组件挂载或卸载时就会去执行这些方法,叫做“生命周期方法”
componentDidMount和componentWillUnmount
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
Hello, world!
It is {this.state.date.toLocaleTimeString()}.
);
}
}
ReactDOM.render(
正确地使用State
- 不要直接修改State,而是使用setState()；
构造函数是唯一可以给 this.state 赋值的地方 - State 的更新可能是异步的
- State 的更新会被合并
// Wrong
this.setState({
counter: this.state.counter + this.props.increment,
});
让setState()接受一个函数而不是一个对象。
// Correct
this.setState((state, props) => ({
counter: state.counter + props.increment
}));
//普通函数写法
this.setState(function(state, props) {
return {
counter: state.counter + props.increment
};
});
数据是向下流动的
组件可以选择把它的 state 作为 props 向下传递到它的子组件中。
任何的 state 总是所属于特定的组件，而且从该 state 派生的任何数据或 UI 只能影响树中“低于”它们的组件。
如果你把一个以组件构成的树想象成一个 props 的数据瀑布的话，那么每一个组件的 state 就像是在任意一点上给瀑布增加额外的水源，但是它只能向下流动。
事件处理
- React 事件的命名采用小驼峰式（camelCase），而不是纯小写
- 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串
在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault。
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// 为了在回调中使用 `this`，这个绑定是必不可少的 this.handleClick = this.handleClick.bind(this); }
handleClick() { this.setState(state => ({ isToggleOn: !state.isToggleOn
})); }
render() {
return (
);
}}
ReactDOM.render(
你必须谨慎对待 JSX 回调函数中的 this，在 JavaScript 中，class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick，当你调用这个函数的时候 this 的值为 undefined.
使用 class fields 正确的绑定回调函数：
class LoggingButton extends React.Component { // 此语法确保 `handleClick` 内的 `this` 已被绑定。 // 注意: 这是 *实验性* 语法。
handleClick = () => { console.log('this is:', this); }
render() {
return (
);
}}
或者在回调中使用箭头函数：
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
// 此语法确保 `handleClick` 内的 `this` 已被绑定。
return (
);
}}
向事件处理程序传递参数
上述两种方式是等价的，分别通过箭头函数和 Function.prototype.bind 来实现。