hjzheng / react-practice

react-practice

自己玩

• npm install

• npm run dev

• 访问 http://localhost:8080/src/index.html

练习内容

• 关于 CSS Module
• 关于 react中 条件表达式:
  • if
  • jsx-control-statements
• 使用 react-lumberjack
• 组件练习:
  • dropdown
  • tabs
  • modal
• Mobx

乱七八糟

• 关于 React 在 0.13 中取消自动绑定的原因:
  • 表面上看自动绑定给开发带来了便利，而Facebook却认为这破坏了JavaScript的语言习惯，其背后的神奇（Magic）逻辑或许会给初学者带来困惑，甚至开发者如果从React再转到其它库也可能会无所适从。
• 关于 React 对文本加 react-text 注释(comments) 的原因:
  • 该注释是提供为 React 内部使用的, 举例说明 如果你需要 render 两个彼此相邻的变量, React 通过这些注释区别两个变量的位置, 从而进行准确的更新, 之前版本使用的使用 <span>
• 关于 React render 只能输出 0 个 或 1 个节点, 会导致添加不必要的包裹节点: 未来版本可能会支持多节点输出
  • 本人有一个想法, 可以通过加注释的方式(和 react-text 类似)将多节点包裹来解决该问题
• State 应该放什么? 引用别人一段:

function shouldIKeepSomethingInReactState() {
    if (canICalculateItFromProps()) {
        // Don't duplicate data from props in state
        // Calculate what you can in render() method.
        return false;
    }

    if (!amIUsingItInRenderMethod()) {
        // Don't keep something in the state
        // if you don't use it for rendering.
        // For example, API subscriptions are
        // better off as custom private fields
        // or variables in external modules.
    }

    // you can use React state for this.
    return true
}

• 关于 PropTypes
  • 复杂类型 使用 shape
  • 自定义校验
  • 生产环境, 删除 PropTypes: 插件
  • 通过 PropTypes 生成 doc: docgen
• React StoryBook (?)
• Container and Presentational pattern example
  • Container components
    • They are more concerned about the behavior
    • They render their presentational components
    • They make API calls and manipulate data
    • They define event handlers
    • They are written as classes
  • Presentational components
    • They are more concerned with visual representation
    • They render the HTML markup(or other components)
    • They receive data from the parents in the form of props
    • They are often written as stateless functional components
• Mixin and HoC (代码复用的角度, React 引入了 Mixin, 但又在 0.13 取消了 Mixin, 原因如下: 见官网)
  • 官方提到的三个原因: 1. 引入了隐式依赖 2. 命名冲突 3. snowballing complexity
  • 本人认为主要还是命名冲突, 在中小型项目中, 解决了命名冲突, Mixin 也是不错的解决方案, 之前在 AngularJS + ES6 中使用 Mixin 装饰器的尝试, 效果还是很不错的.
  • 实际上, 0.13 前的 React 对 mixin 进行了处理, 1. 不允许出现名称相同的普通方法(会在 console 中进行提示) 2. 生命周期方法会叠加在一起顺序执行
  • HoC
    • 修改 prop (增加, 删除, 覆盖)
    • 将无状态组件扩展为有状态组件
    • 其它功能 (?)
• 受控组件和非受控组件
  • 如果实现自己的一套表单控件的话, 建议直接做成受控组件(不必考虑非受控组件情况). 好处: 1.实现简单 2.对数据进行更好的控制

代码风格

• Airbnb React/JSX Style Guide
• 如何安装 Airbnb ESLint 规则? 目前不兼容 ESlint 4.0

相关书籍

• React（第2版）：引领未来的用户界面开发框架 入门经典
• React Design Patterns and Best Practices 进阶神器

补充

• 脚手架 初学者福音