2018-08-01 汉得日记

React小书的继续学习

参考胡子的reactjs小书

参照昨天的日报，组件的划分是很重要的，也可以依次画出组件树。

src/
CommentApp.js
CommentInput.js
CommentList.js
Comment.js
…

规范：这里的文件名的开头是大写字母。我们遵循一个原则：如果一个文件导出的是一个类，那么这个文件名就用大写开头。四个组件类文件导出都是类，所以都是大写字母开头。

早上上课的复习总结

早上吴老师来上课，内容主要是mobx和分chunk打包，还有react的高阶组件问题。由于讲的知识有点多，所以讲的挺快的。自己也是听的半懂非懂，感觉还是预习和基础不扎实。

老师引入Mobx的契机是对于兄弟组件之间进行传值的问题。由于我的react还在入门阶段，目前才搞清楚父组件向子组件传值的问题。兄弟组件还真是没想过。老师说需要借助一个类task.js进行传值。然后又快速的演示了mobx的各种用法，昨晚预习了点，倒是听懂了一点。明天又有考试，需要加紧复习。

下来自己先写了一个父子组件传值，实现了早上老师的效果。即点击按钮，就会呈现从task1,task2递增。
核心代码如下：

addCount()
    {
        return content+=1;
    }
    handleClick=() =>
    {
        this.props.todo.push(`Task${this.addCount()}`);
        console.log(this.props.todo)
        this.setState({
            count:this.props.todo
        })
    }
    render()
    {
        return(
            <Fragment>
            <button onClick={this.handleClick} >增加task</button>
            <TaskList tod={this.state.count} /> 
            </Fragment>
        )

感觉自己还是jQuery这种传统的DOM观念“荼毒”了很久，所以组件化的思想还是需要很久去理解。搞清楚组件与组件之间的关系，结合所学，进行处理。

1.reaction

用法: reaction(() => data, (data, reaction) => { sideEffect }, options?)。

autorun 的变种，对于如何追踪 observable 赋予了更细粒度的控制。 它接收两个函数参数，第一个(数据 函数)是用来追踪并返回数据作为第二个函数(效果 函数)的输入。 不同于 autorun 的是当创建时效果 函数不会直接运行，只有在数据表达式首次返回一个新值后才会运行。 在执行 效果 函数时访问的任何 observable 都不会被追踪。

2.action

推荐封装一个类来存储方法：

class Store {
@observable string = 'hello';
@observable num = 50;

@action bar() {
    this.string = 'world';
    this.num = 30;
}
@action.bound bar1() { 
    this.string = 'world';
    this.num = 30;
}
}

3.优化组件性能

这点在渲染大型数据集合时尤为重要。 React 在渲染大型数据集合时表现非常糟糕，因为协调器必须评估每个集合变化的集合所产生的组件。 因此，建议使用专门的组件来映射集合并渲染这个组件，且不再渲染其他组件:

不好的:

@observer class MyComponent extends Component {
    render() {
        const {todos, user} = this.props;
        return (<div>
            {user.name}
            <ul>
                {todos.map(todo => <TodoView todo={todo} key={todo.id} />)}
            </ul>
        </div>)
    }
}

在上面的示例中，当 user.name 改变时，React 会不必要地协调所有的 TodoView 组件。尽管TodoView 组件不会重新渲染，但是协调的过程本身是非常昂贵的。

Good:

@observer class MyComponent extends Component {
    render() {
        const {todos, user} = this.props;
        return (<div>
            {user.name}
            <TodosView todos={todos} />
        </div>)
    }
}

@observer class TodosView extends Component {
    render() {
        const {todos} = this.props;
        return <ul>
            {todos.map(todo => <TodoView todo={todo} key={todo.id} />)}
        </ul>)
    }
}