• 作者:胡子大哈
    • 原文链接: http://huziketang.com/books/react/lesson45
    • 转载请注明出处,保留原文链接和作者信息。(本文未审核)

    接下可以重构组件部分的内容了。先回顾一下之前我们是怎么划分组件的:

    实例图片

    组件树:

    实例图片

    这样划分方式当然是没错的。但是在组件的实现上有些问题,我们之前并没有太多地考虑复用性问题。所以现在可以看看 comment-app2CommentInput 组件,你会发现它里面有一些 LocalStorage 操作:

    1. ...
    2. _loadUsername () {
    3. const username = localStorage.getItem('username')
    4. if (username) {
    5. this.setState({ username })
    6. }
    7. }
    8. _saveUsername (username) {
    9. localStorage.setItem('username', username)
    10. }
    11. handleUsernameBlur (event) {
    12. this._saveUsername(event.target.value)
    13. }
    14. handleUsernameChange (event) {
    15. this.setState({
    16. username: event.target.value
    17. })
    18. }
    19. ...

    它是一个依赖 LocalStorage 数据的 Smart 组件。如果别的地方想使用这个组件,但是数据却不是从 LocalStorage 里面取的,而是从服务器取的,那么这个组件就没法复用了。

    所以现在需要从复用性角度重新思考如何实现和组织这些组件。假定在目前的场景下,CommentInputCommentListComment 组件都是需要复用的,我们就要把它们做成 Dumb 组件。

    幸运的是,我们发现其实 CommentListComment 本来就是 Dumb 组件,直接把它们俩移动到 components 目录下即可。而 CommentInput 就需要好好重构一下了。我们把它里面和 LocalStorage 操作相关的代码全部删除,让它从 props 获取数据,变成一个 Dumb 组件,然后移动到 src/components/CommentInput.js 文件内:

    1. import React, { Component } from 'react'
    2. import PropTypes from 'prop-types'
    3. export default class CommentInput extends Component {
    4. static propTypes = {
    5. username: PropTypes.any,
    6. onSubmit: PropTypes.func,
    7. onUserNameInputBlur: PropTypes.func
    8. }
    9. static defaultProps = {
    10. username: ''
    11. }
    12. constructor (props) {
    13. super(props)
    14. this.state = {
    15. username: props.username, // 从 props 上取 username 字段
    16. content: ''
    17. }
    18. }
    19. componentDidMount () {
    20. this.textarea.focus()
    21. }
    22. handleUsernameBlur (event) {
    23. if (this.props.onUserNameInputBlur) {
    24. this.props.onUserNameInputBlur(event.target.value)
    25. }
    26. }
    27. handleUsernameChange (event) {
    28. this.setState({
    29. username: event.target.value
    30. })
    31. }
    32. handleContentChange (event) {
    33. this.setState({
    34. content: event.target.value
    35. })
    36. }
    37. handleSubmit () {
    38. if (this.props.onSubmit) {
    39. this.props.onSubmit({
    40. username: this.state.username,
    41. content: this.state.content,
    42. createdTime: +new Date()
    43. })
    44. }
    45. this.setState({ content: '' })
    46. }
    47. render () {
    48. // render 方法保持不变
    49. // ...
    50. }
    51. }

    其实改动不多。原来 CommentInput 需要从 LocalStorage 中获取 username 字段,现在让它从 props 里面去取;而原来用户名的输入框 blur 的时候需要保存 username 到 LocalStorage 的行为也通过 props.onUserNameInputBlur 传递到上层去做。现在 CommentInput 是一个 Dumb 组件了,它的所有渲染操作都只依赖于 props 来完成。

    现在三个 Dumb 组件 CommentInputCommentListComment 都已经就位了。但是单靠 Dumb 组件是没办法完成应用逻辑的,所以接下来我们要构建 Smart 组件来带领它们完成任务。


    因为第三方评论工具有问题,对本章节有任何疑问的朋友可以移步到 React.js 小书的论坛 发帖,我会回答大家的疑问。