@[toc]
Variables
所见，<img/>标记的SRC属性值是{logo}放在大括号中，这就是JSX识别变量的方式。
<img src={logo} className="App-logo" alt="logo" />React将识别｛logo｝，并知道在我们应用程序的第二行中介绍的徽标。然后react将读取此文件并渲染它。让我们尝试设置自己的变量。
在应用程序返回之前，添加const subject='react'；
代码现在应该如下所示：
function App() {
const subject = "React";
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />将第8行中的“world”替换为我们自己的变量subject
保存时，浏览器将显示“你好，反应！”，不是“你好，世界！”
变量非常方便，但我们不利用react。
Prop
Prop是传递到react组件中的任何数据。Props写在组件中，并像HTML属性一样写为prop=“value”。让我们打开index.JS并为＜app/＞添加第一个属性。
ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));在＜app/＞组件中添加一个名为subject的属性，该属性具有Clarice值。
回到 App.js：
function App() {
const subject = "React";
return (
);
}
更改应用程序的函数签名，使其接收props作为参数。
与其他参数一样，可以将props放在控制台日志（）中，并将其打印在浏览器中。
把它放在你的主题之后，然后再回来。
function App(props) {
const subject = "React";
console.log(props);对象的subject属性对应于我们放入app函数签名中的prop，Clarice字符串对应于它的值。react中的组件属性总是以这种方式传递到对象中。
function App(props) {
const subject = props.subject;
return (现在，主题是我们的道具之一，让我们转到app.JS。使用props主题替换原始的react字符串。如果需要，还可以删除控制台日志。
生命周期
生命周期助于了解组件的运行模式，完成更复杂的组件功能，并分析组件错误的原因
生命周期：组件从创建到安装并在页面上运行，然后在组件不使用时卸载的过程
发送AJAX请求，获取远程数据。处理this绑定问题
class App extends React.Component {
constructor() {
super()
// 初始化state
this.state = {
count: 0
}
//
// const title = document.getElementById('title')
// 此时DOM还没渲染，拿不到DOM
// console.log(title) 结果：null
console.warn('生命周期钩子函数： 1.constructor')
}
componentDidMount() {
// const title = document.getElementById('title')
// 1.此时已经完成DOM渲染，可以拿到DOM，进行DOM操作
// console.log(title)
// 2.
// axios.get('http://api....')
console.warn('生命周期钩子函数： 3.componentDidMount')
}React支持自定义错误边界组件以捕获具有渲染错误的子组件。
如果在react组件中定义了两个生命周期方法static getderivedstatefromerror（）或componentdidcatch（）中的任何一个（或两个），它将成为错误边界。当抛出错误时，您可以在getderivedstatefromerror（）端更改状态变量，以控制备用UI的呈现，并在componentdidcatch（）方法中打印错误信息。
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});渲染时，将重新生成虚拟DOM，但在重新渲染UI时，react将仅重新渲染虚拟DOM的更改部分。渲染后，虚拟DOM中输入的值属性值实际上会发生变化，但与不同。输入在实际DOM中的值，因此它不会呈现到UI。
var HelloMessage = React.createClass({
render: function() {
return <h1>
Hello {this.props.name}
</h1><p>
some text
</p>;
}
});另外，可以将ref=“mytextinput”添加到输入和添加控制台。登录handlechange（this.Refs[“mytextinput”].Props）；打印虚拟DOM的属性值以发现秘密。
DOM节点
组件不是真正的DOM节点，而是内存中存在的数据结构，称为虚拟DOM。只有当它被插入到文档中时，它才会成为真正的dom。根据react的设计，所有DOM更改将首先发生在虚拟DOM上，然后实际更改将反映在真实DOM上。这种算法称为DOM-diff，它可以极大地提高网页的性能。
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<div>
{
nemes.map(function(name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
)React为每个状态提供两个处理功能。在进入状态之前调用will函数，在进入状态之后调用did函数。三种状态下有五种处理功能。
- componentWillMount()
- componentDidMount()
- componentWillUpdate(object, nextProps, object nextState)
- componentDidUpdate(object, prevProps, object prevState)
- componentWillUnmount()Mounting：已插入真实DOM
Updating：正在被重新渲染
Unmounting：已移出真实DOM
state和render
状态属性包含定义组件所需的一些数据。当数据更改时，将调用render来再现渲染。只能通过setstate方法更新数据。
