前端学习笔记

ReactDOM

ReactDOM.render() 会使用你的 JSX来替换你的 HTML 中的一个 DOM 节点。

ReactDOM.render()有两个传入参数。第一个是准备渲染的 JSX。第二个参数指定了 React应用在你的 HTML 中的放置的位置。

热模块替换

用 create-react-app 创建的项目，保存时浏览器能够自动刷新；
但是有点时候我们并不希望浏览器刷新也没，因为可能会打断我们的debug状态，比如说console/network中输出的内容

模块热替换（HMR）是一个帮助你在浏览器中重新加载应用的工具，并且无需再让浏览
器刷新页面
 

React的类组件

Component 类是从一个基本ES6类中继承来的 ES6组件类。它有一个React组件所需要的所有功能。

render()方法是必须被重写的方法，因为它定义了一个React组件的输出。它必须被定义。

受控组件

表单元素比如 , 和 会以原生 HTML 的形式保存他
们自己的状态。一旦有人从外部做了一些修改，它们就会修改内部的值，在 React 中这被
称为不受控组件，因为它们自己处理状态。在 React 中，你应该确保这些元素变为受控组
件。

组件拆分

当单个组件逻辑过于复杂时，应该对组件进行拆分。组件拆分时涉及到同组件和父子组件之间的数据流传递。同组件之间可以用this.state传递。父组件像子组件传值，子组件可以通过this.props去获取。

可组合组件

props中有个特殊的变量children；它包含了子组件实例内的元素树。这使得组件之间相互组合变得更为方便；

组件的类型

函数式无状态组件：本质上就是函数，没有this对象.一个经验法则就是当你不需要本地状态或者组件生命周期方法时，你就应该使用函数式无状态组件。
ES6类组件：继承自React组件，extend会继承声明周期算法，可以通过this.state和this.setstate()存储和操控state
将Button重构为无状态组件（入参直接将props解构了）：