2019-05-10 React小书 学习笔记(二)
状态提升
- 当某个状态被多个组件依赖或影响时,就该把状态提升到最近公共父组件中管理,用props传递数据或函数来管理这种依赖或影响的行为.
如何更好的管理这种被多个组件依赖或影响的状态?
Redux状态管理工具
挂载阶段的组件生命周期(一)
我们把 React.js 将组件渲染，并且构造 DOM 元素然后塞入页面的过程称为组件的挂载
挂载过程Demo
componentWillMount:组件挂载开始之前,也就是在render之前调用
componentDidMount:组件挂载完成后,也就是在DOM元素插入页面后调用
componentWillUnmount:在组件对应DOM元素从页面中删除之前调用
挂载阶段的组件生命周期(二)
一般把组件的state的初始化工作放在constructor里去做,在componentWillMount进行组件的启动工作,如果有数据清理就放在componentWillUnmount里面去做
时钟Demo
更新阶段的组件生命周期
更新阶段:就是setState导致React重新渲染组件并把组件的变化应用到DOM元素上的过程,这是一个组件变化的过程
补充关于更新阶段的组件生命周期：
- shouldComponentUpdate(nextProps, nextState)：你可以通过这个方法控制组件是否重新渲染。如果返回 false 组件就不会重新渲染。这个生命周期在 React.js 性能优化上非常有用。
- componentWillReceiveProps(nextProps)：组件从父组件接收到新的 props 之前调用。
- componentWillUpdate()：组件开始重新渲染之前调用。
- componentDidUpdate()：组件重新渲染并且把更改变更到真实的 DOM 以后调用。
ref和react中的DOM操作
我们可以给任意代表 HTML 元素标签加上 ref 从而获取到它 DOM 元素然后调用 DOM API。但是记住一个原则：能不用 ref 就不用。特别是要避免用 ref 来做 React.js 本来就可以帮助你做到的页面自动更新的操作和事件监听。多余的 DOM 操作其实是代码里面的“噪音”，不利于我们理解和维护。
props.children和容器类组件
demo
嵌套的结构在组件内部都可以通过 props.children 获取到，这种组件编写方式在编写容器类型的组件当中非常有用。
dangerouslySetHTML和style属性
demo
设置 innerHTML 可能会导致跨站脚本攻击（XSS），所以 React.js 团队认为把事情搞复杂可以防止（警示）大家滥用这个属性。这个属性不必要的情况就不要使用。
<h1 style={{fontSize: '12px', color: 'red'}}>React.js 小书</h1>
style 接受一个对象，这个对象里面是这个元素的 CSS 属性键值对，原来 CSS 属性中带 - 的元素都必须要去掉 - 换成驼峰命名，如 font-size 换成 fontSize，text-align 换成 textAlign。
用对象作为 style 方便我们动态设置元素的样式。我们可以用 props 或者 state 中的数据生成样式对象再传给元素，然后用setState 就可以修改样式，非常灵活
PropTypes 和组件参数验证
通过 PropTypes 给组件的参数做类型限制，可以在帮助我们迅速定位错误，这在构建大型应用程序的时候特别有用；另外，给组件加上 propTypes，也让组件的开发、使用更加规范清晰。
这里建议大家写组件的时候尽量都写 propTypes，有时候有点麻烦，但是是值得的。
我们在上一阶段的评论功能基础上加上以下功能需求：
- 页面加载完成自动聚焦到评论输入框。
- 把用户名持久化，存放到浏览器的 LocalStorage 中。页面加载时会把用户名加载出来显示到输入框，用户就不需要重新输入用户名了。
- 把已经发布的评论持久化，存放到浏览器的 LocalStorage 中。页面加载时会把已经保存的评论加载出来，显示到页面的评论列表上。
- 评论显示发布日期，如“1 秒前”，”30 分钟前”，并且会每隔 5 秒更新发布日期。
- 评论可以被删除。
- 类似Markdown 的行内代码块显示功能，用户输入的用 `` 包含起来的内容都会被处理成用 <code> 元素包含。例如输入
console.log就会处理成 <code>console.log</code> 再显示到页面上。
记录下开发的流程:
1 聚焦评论框(focus())
2 持久化用户名(在 handleUsernameBlur 中我们把用户输入的内容传给了 _saveUsername 私有方法（所有私有方法都以 _ 开头）。)
3 持久化评论(JSON.stringify()-JSON.parse())
4 显示评论发布时间(timeString , duration)
5 可以删除评论
6 利用正则添加代码块显示功能如 ``
