react中这些细节你注意过没有?
Posted faith3
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react中这些细节你注意过没有?相关的知识,希望对你有一定的参考价值。
react中的一些细节知识点:
1、组件中get的使用(作为类的getter)
ES6知识:class类也有自己的getter和setter,写法如下:
Class Component { constructor() { super() this.name = ‘‘ } // name的getter get name() { ... } // name的setter set name(value) { ... } }
react组件中的get的使用如下:
/* * renderFullName的getter * 可以直接在render中使用this.renderFullName */ get renderFullName () { return `${this.props.firstName} ${this.props.lastName}`; } render() { return ( <div>{this.renderFullName}</div> ) }
那getter在react组件中有什么用处呢??
constructor (props) { super() this.state = {}; } render () { // 常规写法,在render中直接计算 var fullName = `${this.props.firstName} ${this.props.lastName}`; return ( <div> <h2>{fullName}</h2> </div> ); }
// 较为优雅的写法:,减少render函数的臃肿 renderFullName () { return `${this.props.firstName} ${this.props.lastName}`; } render () { var fullName = this.renderFullName()
<div>{ fullName }</div>
}
// 推荐的做法:通过getter而不是函数形式,减少变量 get renderFullName () { return `${this.props.firstName} ${this.props.lastName}`; } render () { <div>{ this.renderFullName }</div> }
如果你了解Vue的话,那么你知道其中的 computed: {} 计算属性,它的底层也是使用了getter,只不过是对象的getter不是类的getter
// 计算属性,计算renderFullName computed: { renderFullName: () => { return `${this.firstName} ${this.lastName}`; } }
Vue的computed有一个优势就是:
计算属性对比函数执行:会有缓存,减少计算 ---> 计算属性只有在它的相关依赖发生改变时才会重新求值。
这就意味着只要 firstName和lastName还没有发生改变,多次访问renderFullName计算属性会立即返回之前的计算结果,而不必再次执行函数。
那么是否react的getter也有缓存这个优势吗??? 答案是:没有,react中的getter并没有做缓存优化!
2、组件的attr及事件执行顺序:
A、父子组件:以props形式,父传递给子
B、同一组件:后面覆盖前面。
依靠上述规则,那么要使得 attr 的权重最高,应该放到最底层的组件中,而且位置尽量的靠后。
<-- 父组件Parent | 调用子组件并传递onChange属性 --> <div> <Child onChange={this.handleParentChange} /> </div> <-- 子组件Child | 接收父组件onChange, 自己也有onChange属性 --> <input {...this.props} onChange={this.handleChildChange} />
此时,Child组件执行的onChange只是执行handleChildChange事件,handleParentChange事件并不会执行.
- 1.如果只需要执行handleParentChange怎么办?? input中 {...this.props} 与 onChange={this.handleChildChange} 换个位置。
- 2.如果两个事件都需要执行怎么办?? 在Child组件中 handleChildChange 中执行 this.props.handleParentChange
3、类中的方法用ES6形式简写的不同之处: fn = () => {} 与 fn() {} 的区别:
export default Class Child extends Component { constructor (props) { super() this.state = {}; } // 写法1,这是ES6的类的方法写法 fn1() { console.log(this) // 输出 undefined } // 写法2,这是react的方法写法 fn2 = () => { console.log(this) // 输出:Child {props: {…}, context: {…}, refs: {…}, …} } render () { return ( <div> <button onClick={this.fn1}>fn1方法执行</button > <button onClick={this.fn2}>fn2方法执行</button > </div> ); } }
可见两种写法,函数内的this指向时不同的。
那它们就没有相同之处吗??, 以下三种情况是相同的:
情况1:函数内部用不到this的时候,两者相等。
// 写法1,这是ES6的类的方法写法 fn1() { return 1 + 1 } // 写法2,这是react的方法写法 fn2 = () => { return 1 + 1 }
情况2:两者在render中直接执行的时候。
// 写法1,这是ES6的类的方法写法 fn1() { console.log(this) // Child {props: {…}, context: {…}, refs: {…}, …} } // 写法2,这是react的方法写法 fn2 = () => { console.log(this) // 输出:Child {props: {…}, context: {…}, refs: {…}, …} } render () { return ( <div> <button onClick={() => { this.fn1(); }}>fn1方法执行</button > <button onClick={() => { this.fn2(); }}>fn2方法执行</button > </div> ); }
情况3:给this.fn2.bind(this),绑定this作用上下文。
// 写法1,这是ES6的类的方法写法 fn1() { console.log(this) // Child {props: {…}, context: {…}, refs: {…}, …} } // 写法2,这是react的方法写法 fn2 = () => { console.log(this) // 输出:Child {props: {…}, context: {…}, refs: {…}, …} } render () { return ( <div> <button onClick={this.fn1}>fn1方法执行</button > <button onClick={this.fn2.bind(this)}>fn2方法执行</button > </div> ); }
注意,不要和ES6中对象的方法简写弄混了,以下是对象Obeject的方法简写:
阮一峰ES6: http://es6.ruanyifeng.com/#docs/object
以上是关于react中这些细节你注意过没有?的主要内容,如果未能解决你的问题,请参考以下文章