@1)每个文件都会有这么一句话 import React from 'react'
@2)关于合成事件 event,不知道你有没有这样的困惑,如下代码(e这个事件是哪里来的呢?)
function ActionLink() {
// 注:这里的e是哪里来的呢?
function handleClick(e) {
e.preventDefault();
console.log('链接被点击');
}
return (
<a href="#" onClick={handleClick}> //这里我并没有传入e这个参数
点我
</a>
);
}
其实是这样子的,当你从了解react开始就会听说虚拟dom这个东西了吧,这里你没有听说过也没有关系(这里一时半会也解释不清,后面文章我会单独去解释这个东西,你先知道有这么个东西),就是这个虚拟dom实现了一个合成事件层,我们所定义的事件处理器会接收到这个合成事件处理对象的实例event且我们不用关心跨平台的问题,再说白一点,就是我们定义一个函数,只要我们把它交给类似onClick,onChange这样的事件处理程序,那么这个函数就会获得event
@4)组件的生命周期,初学react的你是不是被componentWillMount/componentDidMount函数执行一次,componentWillUpdate等函数在更新之前调用弄晕了呢,其实单单看函数的英译,我们大概也猜出来意思,但是为什么在组建的生命周期中只执行一次呢?这是因为react为组件划分了这么几个阶段如下图
也就是说每个函数执行是对应上面的三个阶段的(挂载→更新→卸载)这里组件更新阶段shouldComponentUpdate()函数是可以阻止render()渲染的,就是当你state改变我们将这个函数的返回值设为false,你会发现页面并没有任何改变
@5)ref(reference)是react支持的一种非常特殊的属性,你可以用来绑定到render()输出的任何组件上,也就是你可以在任何时间能准确的拿到绑定组件的实例,举个例子
//首先这里的input这个参数是自动接收的,它可以是任何的名字,它代表<input></input>这个标签
//而this.input = input 也就是给当前类实例TodoList中的this增加一个属性input
//使其this.input属性指向<input></input>实例
class TodoList extends Component{
render(){
return(
<input ref={input => this.input = input}></input>
)
}
changeValue = () =>{
this.input.value = "hello world"
}
}
@6)react中还有很多慢慢探索的细节,这里的总结是自己当初学习迷惑的地方
react性能优化部分(这里初学的时候可能不理解,但是后面代码练习中你就会了解到啦)
1.this绑定,你可以使用es6 语法中的箭头函数或者在构造函数绑定this,而不是这样绑定(onClick = {this.changValue.bind(this)})
2.setState设计成异步,这里在上面已经讲过啦,如果你还是不很理解的话也不要急
3.shouldCompentUpdate 这个函数可以阻止render函数的执行,页面渲染也是相当耗费性能的,这里在上面也已经讲过啦
4.虚拟dom,这个后面再写吧,先知道这个概念吧