react中这些细节你注意过没有？下面本篇文章给大家总结了一些你可能没注意的react细节知识点。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
【相关教程推荐：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
// 计算属性，计算renderfullnamecomputed: { 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.handleparentchange3、类中的方法用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
4、列表渲染中的数组
参考：https://doc.react-china.org/docs/lists-and-keys.html
正常的jsx写法是在render中写类似于html的语法，标签嵌套标签<p><input /></p>，有js，用 { 花括号 }。
但是不知道你注意过没有，数组可以嵌套在标签内部，正常渲染。
function numberlist(props) { const numbers = [1,2,3,4,5]; // listitems是数组numbers通过map返回的，本质也是个数组。 const listitems = numbers.map((number) => <li>{number}</li> ); return ( <ul> // 可以替换成 [ <li>1</li>, <li>2</li>, .....] {listitems} </ul> );}
如上所示，标签内部的数组是可以正确渲染的，那么就有以下的写法：
renderitem(name) { const a = <li key={'a'}>a</li>, b = <li key={'b'}>b</li>, c = <li key={'c'}>c</li>, d = <li key={'d'}>d</li>; let operationlist; switch (name) { case 1: operationlist = [a , b, c] break; case 2: operationlist = [b, c, d] break; case 0: operationlist = [a] break; } return operationlist;}render() { // this.renderitem() 执行结果是数组 return ( <ul>{ this.renderitem() }</ul> )}
更多编程相关知识，请访问：编程视频！！
以上就是你可能没注意的一些react细节知识点！（总结）的详细内容。