React小书的继续学习
参照昨天的日报,组件的划分是很重要的,也可以依次画出组件树。
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>)
}
}