<commit_before># react-practice

#### 自己玩

- `npm install`

- `npm run dev`

- 访问 `http://localhost:8080/src/index.html`

#### 练习内容

- 关于 [CSS Module](https://github.com/camsong/blog/issues/5)
- 关于 [react中 条件表达式](https://github.com/ShuyunXIANFESchool/FE-problem-collection/issues/40):
    - if
    - jsx-control-statements
- 使用 [react-lumberjack](https://github.com/ryanflorence/react-lumberjack)
- 组件练习:
    - dropdown
    - tabs
    - modal
- Mobx

#### 乱七八糟

- 关于 React 在 [0.13](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html) 中取消自动绑定的原因:
    - 表面上看自动绑定给开发带来了便利，而Facebook却认为这破坏了JavaScript的语言习惯，其背后的神奇（Magic）逻辑或许会给初学者带来困惑，甚至开发者如果从React再转到其它库也可能会无所适从。
- 关于 React 对文本加 react-text 注释(comments) 的[原因](https://stackoverflow.com/questions/38133978/reactjs-net-are-react-text-tags-required-when-rendered):
    - 该注释是提供为 React 内部使用的, 举例说明 如果你需要 render 两个彼此相邻的变量, React 通过这些注释区别两个变量的位置, 从而进行准确的更新, 之前版本使用的使用 `<span>`
- 关于 React render 只能输出 0 个 或 1 个节点, 会导致添加不必要的包裹节点: [未来版本可能会支持多节点输出](https://github.com/facebook/react/issues/2127)
- State 应该放什么? 引用别人一段:

```js
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.<commit_msg>添加一个设想<commit_after># react-practice

#### 自己玩

- `npm install`

- `npm run dev`

- 访问 `http://localhost:8080/src/index.html`

#### 练习内容

- 关于 [CSS Module](https://github.com/camsong/blog/issues/5)
- 关于 [react中 条件表达式](https://github.com/ShuyunXIANFESchool/FE-problem-collection/issues/40):
    - if
    - jsx-control-statements
- 使用 [react-lumberjack](https://github.com/ryanflorence/react-lumberjack)
- 组件练习:
    - dropdown
    - tabs
    - modal
- Mobx

#### 乱七八糟

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

```js
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.
{'fraction_non_alphanumeric': 0.13036902601330913, 'fraction_numerical': 0.02238354506957048, 'mean_word_length': 3.1755050505050506, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 12, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1129722', 'n_tokens_mistral': 1595, 'n_tokens_neox': 1606, 'n_words': 251}