阅读本文之前，建议先阅读以下教程：
安装 React
1、下载
wget https://cdn.staticfile.org/react/16.4.0/umd/react.development.js \ https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js \ https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js
react.min.js - React 的核心库
react-dom.min.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码
Babel 内嵌了对 JSX 的支持
如果我们需要使用 JSX，则 </code><span class="lake-fontsize-12" style="color: #555666; background-color: #EEF0F4;"> 标签的 type 属性需要设置为 text/babel</span></div><div>2、hello world</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cscript%20src%3D%5C%22.%2Freact.development.js%5C%22%3E%3C%2Fscript%3E%5Cn%3Cscript%20src%3D%5C%22.%2Freact-dom.development.js%5C%22%3E%3C%2Fscript%3E%5Cn%3Cscript%20src%3D%5C%22.%2Fbabel.min.js%5C%22%3E%3C%2Fscript%3E%5Cn%5Cn%3Cdiv%20id%3D%5C%22app%5C%22%3E%3C%2Fdiv%3E%5Cn%5Cn%3Cscript%20type%3D%5C%22text%2Fbabel%5C%22%3E%5Cn%20%20ReactDOM.render(%3Ch1%3EHello%2C%20world!%3C%2Fh1%3E%2C%20document.getElementById(%5C%22app%5C%22))%3B%5Cn%3C%2Fscript%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22O6lH5%22%2C%22autoWrap%22%3Atrue%7D"></div><h2 id="SGydS">React 元素渲染</h2><div>1、创建元素</div><div>元素是构成 React 应用的最小单位，用于描述屏幕上输出的内容</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22const%20element%20%3D%20%3Ch1%3EHello%2C%20world!%3C%2Fh1%3E%3B%5Cn%5Cn%2F%2F%20%E5%B0%86%E5%85%83%E7%B4%A0%E6%B8%B2%E6%9F%93%E5%88%B0%20DOM%20%E4%B8%AD%5CnReactDOM.render(element%2C%20document.getElementById(%5C%22app%5C%22))%3B%22%2C%22id%22%3A%22haaGp%22%2C%22autoWrap%22%3Atrue%7D"></div><div>2、更新元素</div><div>React 元素都是不可变的, 更新界面的唯一办法是创建一个新的元素</div><div>计时器示例</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22function%20tick()%20%7B%5Cn%20%20const%20element%20%3D%20%3Ch2%3E%E7%8E%B0%E5%9C%A8%E6%97%B6%E5%88%BB%EF%BC%9A%7Bnew%20Date().toLocaleString()%7D%3C%2Fh2%3E%3B%5Cn%5Cn%20%20ReactDOM.render(element%2C%20document.getElementById(%5C%22app%5C%22))%3B%5Cn%7D%5Cn%5CnsetInterval(tick%2C%201000)%3B%22%2C%22id%22%3A%22z4OtE%22%2C%22autoWrap%22%3Atrue%7D"></div><div>2、封装成函数</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22function%20Clock(props)%20%7B%5Cn%20%20return%20%3Ch2%3E%E7%8E%B0%E5%9C%A8%E6%97%B6%E5%88%BB%EF%BC%9A%7Bprops.date.toLocaleString()%7D%3C%2Fh2%3E%3B%5Cn%7D%5Cn%5Cnfunction%20tick()%20%7B%5Cn%20%20ReactDOM.render(%3CClock%20date%3D%7Bnew%20Date()%7D%20%2F%3E%2C%20document.getElementById(%5C%22app%5C%22))%3B%5Cn%7D%5Cn%5CnsetInterval(tick%2C%201000)%3B%22%2C%22id%22%3A%22HnhZW%22%2C%22autoWrap%22%3Atrue%7D"></div><div>4、创建 React.Component 子类</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22class%20Clock%20extends%20React.Component%20%7B%5Cn%20%20render()%20%7B%5Cn%20%20%20%20return%20%3Ch2%3E%E7%8E%B0%E5%9C%A8%E6%97%B6%E5%88%BB%EF%BC%9A%7Bthis.props.date.toLocaleString()%7D%3C%2Fh2%3E%3B%5Cn%20%20%7D%5Cn%7D%5Cn%5Cnfunction%20tick()%20%7B%5Cn%20%20ReactDOM.render(%3CClock%20date%3D%7Bnew%20Date()%7D%20%2F%3E%2C%20document.getElementById(%5C%22app%5C%22))%3B%5Cn%7D%5Cn%5CnsetInterval(tick%2C%201000)%3B%22%2C%22id%22%3A%226eQoP%22%2C%22autoWrap%22%3Atrue%7D"></div><h2 id="bjJc5">JSX</h2><div>1、使用 JavaScript 表达式</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22ReactDOM.render(%3Ch1%3E%7B1%20%2B%201%7D%3C%2Fh1%3E%2C%20document.getElementById(%5C%22app%5C%22))%3B%22%2C%22id%22%3A%22PRBm0%22%2C%22autoWrap%22%3Atrue%7D"></div><div>可以使用 conditional (三元运算) 表达式</div><div>2、样式</div><div>React 推荐使用 camelCase 语法设置内联样式</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22const%20style%20%3D%20%7B%5Cn%20%20fontSize%3A%2020%2C%5Cn%20%20color%3A%20%5C%22%23FF0000%5C%22%2C%5Cn%7D%3B%5Cn%5CnReactDOM.render(%5Cn%20%20%3Ch1%20style%3D%7Bstyle%7D%3Ehello%20world!%3C%2Fh1%3E%2C%5Cn%20%20document.getElementById(%5C%22app%5C%22)%5Cn)%3B%22%2C%22id%22%3A%22ry7JT%22%2C%22autoWrap%22%3Atrue%7D"></div><div>3、注释</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22ReactDOM.render(%5Cn%20%20%3Cdiv%3E%5Cn%20%20%20%20%3Ch1%3Ehello%20world!%3C%2Fh1%3E%5Cn%20%20%20%20%7B%2F*%E6%B3%A8%E9%87%8A*%2F%7D%5Cn%20%20%3C%2Fdiv%3E%2C%5Cn%20%20document.getElementById(%5C%22app%5C%22)%5Cn)%3B%22%2C%22id%22%3A%22IoNQ6%22%2C%22autoWrap%22%3Atrue%7D"></div><div>数组</div><div>数组会自动展开所有成员</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22var%20arr%20%3D%20%5B%3Ch1%3Ehello%3C%2Fh1%3E%2C%20%3Ch1%3Eworld!%3C%2Fh1%3E%5D%3B%5Cn%5CnReactDOM.render(%3Cdiv%3E%7Barr%7D%3C%2Fdiv%3E%2C%20document.getElementById(%5C%22app%5C%22))%3B%22%2C%22id%22%3A%22kI8xj%22%2C%22autoWrap%22%3Atrue%7D"></div><h2 id="730MS">组件</h2><div>原生 HTML 元素名以小写字母开头，</div><div>自定义的 React 类名以大写字母开头</div><div>class 属性需要写成 className ，</div><div>for 属性需要写成 htmlFor</div><div>1、函数定义组件</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22function%20MyComponent(props)%20%7B%5Cn%20%20return%20%3Ch1%3E%7Bprops.name%7D%3C%2Fh1%3E%3B%5Cn%7D%5Cn%5CnReactDOM.render(%3CMyComponent%20name%3D%5C%22Tom%5C%22%20%2F%3E%2C%20document.getElementById(%5C%22app%5C%22))%3B%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22vOL6j%22%2C%22autoWrap%22%3Atrue%7D"></div><div>2、ES6 class 定义组件</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22class%20MyComponent%20extends%20React.Component%20%7B%5Cn%20%20render()%20%7B%5Cn%20%20%20%20return%20%3Ch1%3E%7Bthis.props.name%7D%3C%2Fh1%3E%3B%5Cn%20%20%7D%5Cn%7D%5Cn%5CnReactDOM.render(%3CMyComponent%20name%3D%5C%22Tom%5C%22%20%2F%3E%2C%20document.getElementById(%5C%22app%5C%22))%3B%22%2C%22id%22%3A%22jH5ew%22%2C%22autoWrap%22%3Atrue%7D"></div><div>3、复合组件</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22function%20Name(props)%20%7B%5Cn%20%20return%20%3Ch1%3E%E5%90%8D%E7%A7%B0%EF%BC%9A%7Bprops.name%7D%3C%2Fh1%3E%3B%5Cn%7D%5Cn%5Cnfunction%20Url(props)%20%7B%5Cn%20%20return%20%3Ch1%3E%E7%BD%91%E5%9D%80%EF%BC%9A%7Bprops.url%7D%3C%2Fh1%3E%3B%5Cn%7D%5Cn%5Cnfunction%20App()%20%7B%5Cn%20%20return%20(%5Cn%20%20%20%20%3Cdiv%3E%5Cn%20%20%20%20%20%20%3CName%20name%3D%5C%22%E7%99%BE%E5%BA%A6%5C%22%20%2F%3E%5Cn%20%20%20%20%20%20%3CUrl%20url%3D%5C%22http%3A%2F%2Fwww.baidu.com%5C%22%20%2F%3E%5Cn%20%20%20%20%3C%2Fdiv%3E%5Cn%20%20)%3B%5Cn%7D%5Cn%5CnReactDOM.render(%3CApp%20%2F%3E%2C%20document.getElementById(%5C%22app%5C%22))%3B%22%2C%22id%22%3A%224HAhh%22%2C%22autoWrap%22%3Atrue%7D"></div><h2 id="SIDos">State(状态)</h2><div>计时器每秒更新一次</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22class%20MyComponent%20extends%20React.Component%20%7B%5Cn%20%20constructor(props)%20%7B%5Cn%20%20%20%20super(props)%3B%5Cn%20%20%20%20this.state%20%3D%20%7B%20date%3A%20new%20Date()%20%7D%3B%5Cn%20%20%7D%5Cn%5Cn%20%20%2F%2F%20%E6%8C%82%E8%BD%BD%5Cn%20%20componentDidMount()%20%7B%5Cn%20%20%20%20this.timerID%20%3D%20setInterval(()%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20this.tick()%3B%5Cn%20%20%20%20%7D%2C%201000)%3B%5Cn%20%20%7D%5Cn%5Cn%20%20%2F%2F%20%E5%8D%B8%E8%BD%BD%5Cn%20%20componentWillUnMount()%20%7B%5Cn%20%20%20%20clearInterval(this.timerID)%3B%5Cn%20%20%7D%5Cn%5Cn%20%20tick()%20%7B%5Cn%20%20%20%20this.setState(%7B%5Cn%20%20%20%20%20%20date%3A%20new%20Date()%2C%5Cn%20%20%20%20%7D)%3B%5Cn%20%20%7D%5Cn%5Cn%20%20render()%20%7B%5Cn%20%20%20%20return%20%3Ch1%3E%7Bthis.state.date.toLocaleString()%7D%3C%2Fh1%3E%3B%5Cn%20%20%7D%5Cn%7D%5Cn%5CnReactDOM.render(%3CMyComponent%20%2F%3E%2C%20document.getElementById(%5C%22app%5C%22))%3B%22%2C%22id%22%3A%22FlKrw%22%2C%22autoWrap%22%3Atrue%7D"></div><h2 id="XmGzi">Props</h2><div>props 不可变, 用来传递数据</div><div>state 用来更新和修改数据</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22function%20Name(props)%20%7B%5Cn%20%20return%20%3Ch1%3E%7Bprops.name%7D%3C%2Fh1%3E%3B%5Cn%7D%5Cn%5CnReactDOM.render(%3CName%20name%3D%5C%22Tom%5C%22%20%2F%3E%2C%20document.getElementById(%5C%22app%5C%22))%3B%22%2C%22id%22%3A%22op2bj%22%2C%22autoWrap%22%3Atrue%7D"></div><h2 id="BP2AQ">事件处理</h2><div>事件绑定属性的命名采用驼峰式写法</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22function%20Link()%20%7B%5Cn%20%20function%20handleClick()%20%7B%5Cn%20%20%20%20console.log(%5C%22%E6%8C%89%E9%92%AE%E8%A2%AB%E7%82%B9%E5%87%BB%E4%BA%86%5C%22)%3B%5Cn%20%20%7D%5Cn%5Cn%20%20return%20%3Cbutton%20onClick%3D%7BhandleClick%7D%3E%E6%8C%89%E9%92%AE%3C%2Fbutton%3E%3B%5Cn%7D%5Cn%5CnReactDOM.render(%3CLink%20%2F%3E%2C%20document.getElementById(%5C%22app%5C%22))%3B%22%2C%22id%22%3A%22Zvf51%22%2C%22autoWrap%22%3Atrue%7D"></div><div>按钮点击开启和关闭</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22class%20Toggle%20extends%20React.Component%20%7B%5Cn%20%20constructor(props)%20%7B%5Cn%20%20%20%20super(props)%3B%5Cn%20%20%20%20this.state%20%3D%20%7B%5Cn%20%20%20%20%20%20isToggleOn%3A%20true%2C%5Cn%20%20%20%20%7D%3B%5Cn%20%20%7D%5Cn%5Cn%20%20handleClick(e)%20%7B%5Cn%20%20%20%20this.setState((prevState)%20%3D%3E%20(%7B%5Cn%20%20%20%20%20%20isToggleOn%3A%20!prevState.isToggleOn%2C%5Cn%20%20%20%20%7D))%3B%5Cn%20%20%7D%5Cn%5Cn%20%20render()%20%7B%5Cn%20%20%20%20return%20(%5Cn%20%20%20%20%20%20%3Cbutton%20onClick%3D%7B(e)%20%3D%3E%20this.handleClick(e)%7D%3E%5Cn%20%20%20%20%20%20%20%20%7Bthis.state.isToggleOn%20%3F%20%5C%22%E5%BC%80%E5%90%AF%5C%22%20%3A%20%5C%22%E5%85%B3%E9%97%AD%5C%22%7D%5Cn%20%20%20%20%20%20%3C%2Fbutton%3E%5Cn%20%20%20%20)%3B%5Cn%20%20%7D%5Cn%7D%5Cn%5CnReactDOM.render(%3CToggle%20%2F%3E%2C%20document.getElementById(%5C%22app%5C%22))%3B%22%2C%22id%22%3A%22kgOii%22%2C%22autoWrap%22%3Atrue%7D"></div><h2 id="Zfcx3">条件渲染</h2><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22function%20User(props)%20%7B%5Cn%20%20return%20%3Ch1%3EUser%3C%2Fh1%3E%3B%5Cn%7D%5Cn%5Cnfunction%20Guest(props)%20%7B%5Cn%20%20return%20%3Ch1%3EGuest%3C%2Fh1%3E%3B%5Cn%7D%5Cn%5Cnfunction%20App(props)%20%7B%5Cn%20%20if%20(props.role%20%3D%3D%20%5C%22user%5C%22)%20%7B%5Cn%20%20%20%20return%20%3CUser%20%2F%3E%3B%5Cn%20%20%7D%20else%20%7B%5Cn%20%20%20%20return%20%3CGuest%20%2F%3E%3B%5Cn%20%20%7D%5Cn%7D%5Cn%5CnReactDOM.render(%3CApp%20role%3D%5C%22user%5C%22%20%2F%3E%2C%20document.getElementById(%5C%22app%5C%22))%3B%22%2C%22id%22%3A%22rHiYZ%22%2C%22autoWrap%22%3Atrue%7D"></div><h2 id="hV1A4">列表 & Keys</h2><div>每个列表元素需要分配一个兄弟元素之间的唯一 key</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22function%20App(props)%20%7B%5Cn%20%20const%20numbers%20%3D%20%5B1%2C%202%2C%203%5D%3B%5Cn%20%20const%20items%20%3D%20numbers.map((item%2C%20index)%20%3D%3E%20%7B%5Cn%20%20%20%20return%20%3Cli%20key%3D%7Bindex%7D%3E%7Bitem%7D%3C%2Fli%3E%3B%5Cn%20%20%7D)%3B%5Cn%20%20return%20items%3B%5Cn%7D%5Cn%5CnReactDOM.render(%3CApp%20%2F%3E%2C%20document.getElementById(%5C%22app%5C%22))%3B%22%2C%22id%22%3A%22dFGTj%22%2C%22autoWrap%22%3Atrue%7D"></div><h2 id="HYPEp">组件 API</h2><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%2F%2F%20%E5%90%88%E5%B9%B6%E7%8A%B6%E6%80%81%5CnsetState(object%20nextState%5B%2C%20function%20callback%5D)%5Cn%5Cn%2F%2F%20%E6%9B%BF%E6%8D%A2%E7%8A%B6%E6%80%81%5CnreplaceState(object%20nextState%5B%2C%20function%20callback%5D)%5Cn%5Cn%2F%2F%20%E5%90%88%E5%B9%B6%E5%B1%9E%E6%80%A7%5CnsetProps(object%20nextProps%5B%2C%20function%20callback%5D)%5Cn%5Cn%2F%2F%20%E6%9B%BF%E6%8D%A2%E5%B1%9E%E6%80%A7%5CnreplaceProps(object%20nextProps%5B%2C%20function%20callback%5D)%5Cn%5Cn%2F%2F%20%E5%BC%BA%E5%88%B6%E6%9B%B4%E6%96%B0%5CnforceUpdate(%5Bfunction%20callback%5D)%5Cn%5Cn%2F%2F%20%E8%8E%B7%E5%8F%96DOM%E8%8A%82%E7%82%B9%5CnDOMElement%20findDOMNode()%5Cn%5Cn%2F%2F%20%E7%BB%84%E4%BB%B6%E6%8C%82%E8%BD%BD%E7%8A%B6%E6%80%81%5Cnbool%20isMounted()%22%2C%22id%22%3A%22mOtKI%22%2C%22autoWrap%22%3Atrue%7D"></div><div>点击计数示例</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22class%20App%20extends%20React.Component%20%7B%5Cn%20%20constructor(props)%20%7B%5Cn%20%20%20%20super(props)%3B%5Cn%20%20%20%20this.state%20%3D%20%7B%5Cn%20%20%20%20%20%20count%3A%200%2C%5Cn%20%20%20%20%7D%3B%5Cn%5Cn%20%20%20%20this.handleClick%20%3D%20this.handleClick.bind(this)%3B%5Cn%20%20%7D%5Cn%5Cn%20%20handleClick()%20%7B%5Cn%20%20%20%20this.setState((state)%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20return%20%7B%20count%3A%20state.count%20%2B%201%20%7D%3B%5Cn%20%20%20%20%7D)%3B%5Cn%20%20%7D%5Cn%5Cn%20%20render()%20%7B%5Cn%20%20%20%20return%20%3Ch1%20onClick%3D%7Bthis.handleClick%7D%3E%E7%82%B9%E5%87%BB%E8%AE%A1%E6%95%B0%EF%BC%9A%7Bthis.state.count%7D%3C%2Fh1%3E%3B%5Cn%20%20%7D%5Cn%7D%5Cn%5CnReactDOM.render(%3CApp%20%2F%3E%2C%20document.getElementById(%5C%22app%5C%22))%3B%22%2C%22id%22%3A%22GrdMa%22%2C%22autoWrap%22%3Atrue%7D"></div><h2 id="mJqTS">组件生命周期</h2><div>三个状态</div><ol><li>Mounting：已插入真实 DOM</li><li>Updating：正在被重新渲染</li><li>Unmounting：已移出真实 DOM</li></ol><div>生命周期的方法</div><ol><li>componentWillMount 在渲染前调用</li><li>componentDidMount 在第一次渲染后调用</li><li>componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用</li><li>shouldComponentUpdate 在组件接收到新的 props 或者 state 时被调用</li><li>componentWillUpdate 在组件接收到新的 props 或者 state 但还没有 render 时被调用</li><li>componentDidUpdate 在组件完成更新后立即调用</li><li>componentWillUnmount 在组件从 DOM 中移除之前立刻被调用</li></ol><h2 id="LPH5j">AJAX</h2><div>服务端 server.js</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22cnpm%20i%20express%20cors%22%2C%22id%22%3A%22Fiodv%22%2C%22autoWrap%22%3Atrue%7D"></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22const%20express%20%3D%20require(%5C%22express%5C%22)%3B%5Cnconst%20cors%20%3D%20require(%5C%22cors%5C%22)%3B%5Cn%5Cnconst%20app%20%3D%20express()%3B%5Cn%5Cnapp.use(cors())%3B%5Cn%5Cnapp.use(%5C%22%2F%5C%22%2C%20function%20(req%2C%20res)%20%7B%5Cn%20%20return%20res.send(%7B%20data%3A%20%7B%20name%3A%20%5C%22Tom%5C%22%20%7D%20%7D)%3B%5Cn%7D)%3B%5Cn%5Cnapp.listen(8080%2C%20function%20()%20%7B%5Cn%20%20console.log(%5C%22listening%3A%20http%3A%2F%2F127.0.0.1%3A8080%5C%22)%3B%5Cn%7D)%3B%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22xAAQZ%22%2C%22autoWrap%22%3Atrue%7D"></div><div>下载 axios 并引入</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22wget%20https%3A%2F%2Fcdn.bootcdn.net%2Fajax%2Flibs%2Faxios%2F0.19.2%2Faxios.min.js%22%2C%22id%22%3A%221Lv4U%22%2C%22autoWrap%22%3Atrue%7D"></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22class%20App%20extends%20React.Component%20%7B%5Cn%20%20constructor(props)%20%7B%5Cn%20%20%20%20super(props)%3B%5Cn%20%20%20%20this.state%20%3D%20%7B%5Cn%20%20%20%20%20%20name%3A%20%5C%22%5C%22%2C%5Cn%20%20%20%20%7D%3B%5Cn%20%20%7D%5Cn%5Cn%20%20componentDidMount()%20%7B%5Cn%20%20%20%20axios.get(%5C%22http%3A%2F%2F127.0.0.1%3A8080%2F%5C%22).then((res)%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20this.setState(%7B%5Cn%20%20%20%20%20%20%20%20name%3A%20res.data.data.name%2C%5Cn%20%20%20%20%20%20%7D)%3B%5Cn%20%20%20%20%7D)%3B%5Cn%20%20%7D%5Cn%5Cn%20%20render()%20%7B%5Cn%20%20%20%20return%20%3Ch1%3E%7Bthis.state.name%7D%3C%2Fh1%3E%3B%5Cn%20%20%7D%5Cn%7D%5Cn%5CnReactDOM.render(%3CApp%20%2F%3E%2C%20document.getElementById(%5C%22app%5C%22))%3B%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22VDzV6%22%2C%22autoWrap%22%3Atrue%7D"></div><h2 id="QDZeI">表单与事件</h2><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22class%20App%20extends%20React.Component%20%7B%5Cn%20%20constructor(props)%20%7B%5Cn%20%20%20%20super(props)%3B%5Cn%20%20%20%20this.state%20%3D%20%7B%5Cn%20%20%20%20%20%20value%3A%20%5C%22%5C%22%2C%5Cn%20%20%20%20%7D%3B%5Cn%20%20%20%20this.handleChange%20%3D%20this.handleChange.bind(this)%3B%5Cn%20%20%7D%5Cn%5Cn%20%20handleChange(event)%20%7B%5Cn%20%20%20%20this.setState(%7B%20value%3A%20event.target.value%20%7D)%3B%5Cn%20%20%7D%5Cn%5Cn%20%20render()%20%7B%5Cn%20%20%20%20return%20(%5Cn%20%20%20%20%20%20%3Cdiv%3E%5Cn%20%20%20%20%20%20%20%20%3Cinput%5Cn%20%20%20%20%20%20%20%20%20%20type%3D%5C%22text%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20value%3D%7Bthis.state.value%7D%5Cn%20%20%20%20%20%20%20%20%20%20onChange%3D%7Bthis.handleChange%7D%5Cn%20%20%20%20%20%20%20%20%3E%3C%2Finput%3E%5Cn%20%20%20%20%20%20%20%20%3Ch2%3E%7Bthis.state.value%7D%3C%2Fh2%3E%5Cn%20%20%20%20%20%20%3C%2Fdiv%3E%5Cn%20%20%20%20)%3B%5Cn%20%20%7D%5Cn%7D%5Cn%5CnReactDOM.render(%3CApp%20%2F%3E%2C%20document.getElementById(%5C%22app%5C%22))%3B%22%2C%22id%22%3A%22KNGSw%22%2C%22autoWrap%22%3Atrue%7D"></div><h2 id="XLlrO">Refs</h2><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22class%20App%20extends%20React.Component%20%7B%5Cn%20%20constructor(props)%20%7B%5Cn%20%20%20%20super(props)%3B%5Cn%5Cn%20%20%20%20this.handleClick%20%3D%20this.handleClick.bind(this)%3B%5Cn%20%20%7D%5Cn%5Cn%20%20handleClick()%20%7B%5Cn%20%20%20%20this.refs.input.focus()%3B%5Cn%20%20%7D%5Cn%5Cn%20%20render()%20%7B%5Cn%20%20%20%20return%20(%5Cn%20%20%20%20%20%20%3Cdiv%3E%5Cn%20%20%20%20%20%20%20%20%3Cinput%20type%3D%5C%22text%5C%22%20ref%3D%5C%22input%5C%22%3E%3C%2Finput%3E%5Cn%20%20%20%20%20%20%20%20%3Cbutton%20onClick%3D%7Bthis.handleClick%7D%3Efocus%3C%2Fbutton%3E%5Cn%20%20%20%20%20%20%3C%2Fdiv%3E%5Cn%20%20%20%20)%3B%5Cn%20%20%7D%5Cn%7D%5Cn%5CnReactDOM.render(%3CApp%20%2F%3E%2C%20document.getElementById(%5C%22app%5C%22))%3B%22%2C%22id%22%3A%22tYjtO%22%2C%22autoWrap%22%3Atrue%7D"></div>
