共计 1656 个字符，预计需要花费 5 分钟才能阅读完成。
React 太灵活了特别是配上了 es6 之后，它就像泥沙里的泥鳅，越想抓住越是抓不住；除此之外我在使用 react 的时候时不时的会有些纠结
1. 组件中有很多事件处理，到底是使用一个方法 +switch 呢？还是每个事件写一个方法？
//1. one function + switch pattern
class OneFunSwitch extends Component {
handleChange = (e)=>{
let {type} = e.target.dataset;
/** switch–case–default **/
}
render(){
return(
<div>
<button onClick={this.handleChange} data-type=”name”> 修改名称 </button>
<button onClick={this.handleChange} data-type=”age”> 修改年龄 </button>
<button onClick={this.handleChange} data-type=”submit”> 提交 </button>
{/** …more evenet **/}
</div>
)
}
}
// 2. multiple functon pattern
class MultipleFun extends Component {
handleNameChange = ()=>{}
handleAgeChange = ()=>{}
handleSubmit = ()=>{}
render(){
return(
<div>
<button onClick={this.handleNameChange} > 修改名称 </button>
<button onClick={this.handleAgeChange} > 修改年龄 </button>
<button onClick={this.handleSubmit} > 提交 </button>
{/** …more evenet **/}
</div>
)
}
}
上面 2 钟方式，你在开发中经常使用哪一种？还是说看心情来，<_>
2. 通过那种方式进行事件绑定和参数传递？主要有以下几种方式
// 1. 使用 es6 arrow function
class ArrowFun extends React.Component {
click(){ /** click… **/}
render(){
return(
<div>
<button onClick={()=>this.click()}>click</button>
<button onClick={this.click.bind(this,{})}>click</button>
</div>
)
}
}
// 以上 2 种方法等效，看上去这种写法还是很不错的，但是因为函数无法像数据那样走 diff 算法，所以组件会做浪费的渲染
// 2. 通过构造函数进行 this 绑定
class ArrowFun extends React.Component {
constructor(props){
super(props);
this.click = this.click.bind(this);
}
click(){ /** click… **/}
render(){
return(
<div>
<button onClick={this.click}>click</button>
</div>
)
}
}
// 相对第一种，是解决了多余 render 问题，但是好像没啥好的办法进行参数的传递，同时还多了一行代码。
// 3. 使用 class-properties
class ArrowFun extends React.Component {
constructor(props){
super(props);
}
click =()=>{
}
render(){
return(
<div>
<button onClick={this.click}>click</button>
</div>
)
}
}
// 相对前 2 种，貌似这种最好了；但是需要注意的是 1. 类属性还不是 es 规范，2. 同样面临参数传递的问题
好吧，该用哪一种呢？任意用吗？
～～～未完待续
