React 入门教程笔记

阅读本文之前，建议先阅读以下教程：

1. React 教程 - 菜鸟教程
2. React 文档 - 中文

安装 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 data-lake-id="75db9a5993f6bca1c7a578b97c4c5bee">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 data-lake-id="3d5a8d18dc2774d4b904590789300606" id="SGydS">React 元素渲染</h2><div data-lake-id="ffd37186e74c9a512080d075bc2ef368">1、创建元素</div><div data-lake-id="cc12cb39f5f0d2adb4cfc168e9183465">元素是构成 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 data-lake-id="c3886490f26e5052cb3702e164d3be34">2、更新元素</div><div data-lake-id="5fb35914ae2857809bc3a374483e58b0">React 元素都是不可变的, 更新界面的唯一办法是创建一个新的元素</div><div data-lake-id="d39f6c71ff89692d59c2f360fdec697e">计时器示例</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 data-lake-id="324b426ccba629e2a8c8e7c0daf5d980">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 data-lake-id="ed934c137dbc3dfc76f2cf9d572f9c32">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 data-lake-id="d88e7c16dbd528359094f961bd9d4d28" id="bjJc5">JSX</h2><div data-lake-id="7c13bc7f1879e5ad65dd57ec3a3ad579">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 data-lake-id="3251753b0bdbfa0bc92ead3e32008156">可以使用 conditional (三元运算) 表达式</div><div data-lake-id="6b021997500bde6110e10db6e8a127c8">2、样式</div><div data-lake-id="cd59742c76907a2e13fcf171f3db97ea">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 data-lake-id="acc9efb53b0ae142880b05d9062093d1">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 data-lake-id="aae82387e1ec5cf52c4a6e59ca7a20a3">数组</div><div data-lake-id="dc22ede6b40324b84638be261a6e4cff">数组会自动展开所有成员</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 data-lake-id="0e76016aacecb3f06e1ba07b6d652db1" id="730MS">组件</h2><div data-lake-id="6828885246becbc335bbb3039f73686f">原生 HTML 元素名以小写字母开头，</div><div data-lake-id="29ebb4b6fdfc4fabba53f16f9b4144d8">自定义的 React 类名以大写字母开头</div><div data-lake-id="36b667c628aafd28c1b4c0d55c940720">class 属性需要写成 className ，</div><div data-lake-id="31f77aaf0aa76bbbe23994de022c4ef0">for 属性需要写成 htmlFor</div><div data-lake-id="496134317b6e09c2e97fc431f2adad60">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 data-lake-id="c816ccb9ed0896da41577b6415376857">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 data-lake-id="7f003e3f915f724aa4c7c9ec8364c1cc">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 data-lake-id="1933a669dd629ea1fac499c154c59e55" id="SIDos">State(状态)</h2><div data-lake-id="a47e0c79388727b0d12b2fe09fd0b7e0">计时器每秒更新一次</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 data-lake-id="8a233bce7720c8ac4c92e8f4e802950b" id="XmGzi">Props</h2><div data-lake-id="6eeeac97db1971e1708a478b4e66cefd">props 不可变, 用来传递数据</div><div data-lake-id="b3329290110db4fc9ff889905a4f5d6d">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 data-lake-id="4d7b06491cccd5196882337f0d3164c2" id="BP2AQ">事件处理</h2><div data-lake-id="8d8fd3f92cced4dd7d1c56fedfad5f99">事件绑定属性的命名采用驼峰式写法</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 data-lake-id="aebaa572b729cd29924890776aa8ec36">按钮点击开启和关闭</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 data-lake-id="74f51a6e0c01ad99bf05bb9b2217df73" 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 data-lake-id="4d9c7e2d0efe247529408f3b1daca8ed" id="hV1A4">列表 & Keys</h2><div data-lake-id="a3c0416018e7432810337499ef4d8677">每个列表元素需要分配一个兄弟元素之间的唯一 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 data-lake-id="95c36296538a0bb670dfd57543632ed5" 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 data-lake-id="23d8b93af95a558f5a51a7b73415f041">点击计数示例</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 data-lake-id="cfd385775c4b127bd0f6656eea649eac" id="mJqTS">组件生命周期</h2><div data-lake-id="7b56e6c715b82a1f66fa5c060b2c3dae">三个状态</div><ol data-lake-id="d160a60c2e0d599b832feb67bbcee746"><li data-lake-id="e4e6c2d7c6cd6503b046d86652bd5952">Mounting：已插入真实 DOM</li><li data-lake-id="0c8957a0d02ae98d6194597606911a63">Updating：正在被重新渲染</li><li data-lake-id="cb43a4b56b84ec7e78d2ca4db04a3bdd">Unmounting：已移出真实 DOM</li></ol><div data-lake-id="1f42cb23a7e49b1d25fa86b235148acf">生命周期的方法</div><ol data-lake-id="c7260c42582aa0ad7563e96e3a477e1c"><li data-lake-id="3197579ea39039c7ff5fc4f292d8115a">componentWillMount 在渲染前调用</li><li data-lake-id="47567f261b0e9195ea550627442c0936">componentDidMount 在第一次渲染后调用</li><li data-lake-id="f3b20160913b1bcb6385d3a9323dc7ef">componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用</li><li data-lake-id="2178e9d31218906acd3ca9ae57b5eb87">shouldComponentUpdate 在组件接收到新的 props 或者 state 时被调用</li><li data-lake-id="7be979868aff6ea4e1543f4e41dfc07e">componentWillUpdate 在组件接收到新的 props 或者 state 但还没有 render 时被调用</li><li data-lake-id="8bd47b37ed0a9bbf3bef7756485b3a97">componentDidUpdate 在组件完成更新后立即调用</li><li data-lake-id="386018111d87c60fa9213cb24a73557f">componentWillUnmount 在组件从 DOM 中移除之前立刻被调用</li></ol><h2 data-lake-id="0c7e32f28f4990998fb9d4d47490c460" id="LPH5j">AJAX</h2><div data-lake-id="4ec00a05b638d619ce2db92d9cc3954e">服务端 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 data-lake-id="cdb5038352a9b87ce47154bcd90ee659">下载 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 data-lake-id="3a280a7f855197e5cac78ceb0b11be08" 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 data-lake-id="4bf6fbff628f098805d28f58cfd5d320" 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>