React小书
本书作者：胡子大哈
书名：React.js 小书
第一阶段
对React.js的初级应用，通过实际需求慢慢引出react的组件化的特点。
本次记录作者对于每个阶段的总结：
JSX 是 JavaScript 语言的一种语法扩展，很像HTML。理解JSX是如何解析成HTML的
[图片上传失败...(image-71eef3-1607529200043)]
React.js 可以用 JSX 来描述组件长什么样的。
react-dom 负责把这个用来描述 UI 信息的 JavaScript 对象变成 DOM 元素，并且渲染到页面上。
自定义的组件都必须要用大写字母开头，普通的 HTML 标签都用小写字母开头。
render函数内必须要用一个外层元素把内容进行包裹。
事件监听：这些on*的事件监听只能用在普通的 HTML 的标签上，而不能用在组件标签上。
React.js 的事件监听方法需要手动 bind 到当前实例。
使用setState 接受对象参数，调用的时候，React.js 会更新组件的状态state ，并且重新调用 render 方法，然后再把render方法所渲染的最新内容显示到页面上。
setState 接受一个对象或者函数作为参数。
调用setState的时候，React.js 不会马上修改state。而是将这个对象放到一个更新队列，稍后把新的状态提取出来合并到state当中。
在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都作为 props 对象的键值；
props 不可表，React.js 希望一个组件在输入的确定的 props 的时候，能够输出确定的 UI 显示形态。
state 是让组件控制自己的状态，props 是让外部对组件自己进行配置。
对于用表达式套数组罗列到页面上的元素，都要为每个元素加上 key 属性，这个key 必须是每个元素唯一的标识（一般是取后台数据）
第一阶段实战
评论功能实现：
根据需要实现的效果图进行 组件拆分，本次是将整体、输入、评论列表展示、每一条内容展示。一共4个组件。
组件树 如图所示：
动手实现：
1、先搭起整个框架的结构，定义好各个组件。
2、逐步搭建靠近根节点的组件。
3、逐步完善当前节点的子节点。
子节点向父节点传递数据的时候，使用父组件在子组件定义的回调函数。先实现子组件的具体事件，然后通过子组件的函数，调用this.props.key （key值父组件传递的函数）。
总结：
1、实现功能之前先理解、分析需求、划分组件。并且掌握划分组件的基本原则 ---- 可复用、可维护。
2、受控组建的概念，React.js 值如果是受到 React.js 的控制，那么就是受控组件。
3、组件之间使用 props 通过父元素传递数据的技巧。
第二阶段
一、前端应用的状态管理——状态提升
上个评论功能的案例中，当有别的组件也依赖这个comments数据或者有别的组件会影响这个数据，需要把这个数据来源往上一个父组件的层
二、挂在阶段的组件生命周期
我们把React.js 将组件渲染，并且构造DOM 元素然后塞入页面的过程称为组件的挂载。
顺序
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="react" cid="n44" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">constructor()
componentWillMound()
render()
componentDidMount()
componentWillUnmount()</pre>
当前界面触发setState会重新加载render方法，不会走componentDidMount()
总结
componentWillMount : 组件挂载开始之前，也就是在render方法之前调用
componentDidMount : 组件挂载完成以后，也就是 DOM 元素已经插入页面后调用。
componentWillUnmount: 组件对应的 DOM 元素从页面中删除之前调用
所有模块式开发，遵循 “自顶向下，逐步求精”
重新构造和销毁组件的时候，回调函数还在不停的尝试 setState，由于setState 只能在已经挂载或正在挂载的组件上调用。
ref 和 React.js 中的DOM 操作
<pre mdtype="fences" cid="n64" lang="react" class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><input ref = {(input) => this.intput = input} /></pre>
ref属性是一个函数，当input的元素在页面上挂载完成以后，React.js 就会调用这个函数，并且把这个挂载以后的DOM节点传给这个函数。但是要记住一个原则：能不用ref就不用，多余的DOM操作其实是代码里面的“噪音”，不利于我们理解和维护
给自定义组件传入子元素，只需使用{this.props.children},甚至可以指定某一位 {this.props.children[0]}
想要当前js解析 html标签，需要使用 dangerouslySetInnerHTML = {{__html: this.state.content}}
PropsTypes 和组件的参数验证
<pre mdtype="fences" cid="n80" lang="react" class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">static propTypes = {
comment : PropTypes.object
}</pre>
<pre mdtype="fences" cid="n84" lang="react" class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">static propsTypes = {
comment: PropTypes.object.isRequired
}</pre>
还有一系列的参数
<pre mdtype="fences" cid="n88" lang="react" class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">PropTypes.array
PropTypes.bool
PropTypes.func
PropTypes.number
PropTypes.object
PropTypes.string
PropTypes.node
PropTypes.element</pre>
避坑
const 修饰的变量不允许修改，let 可以修改
