React 学习 11.20_react plusinsert-CSDN博客

本文链接：https://blog.csdn.net/Sitwoold/article/details/84307534

11.20

四 JSX语法最基本的使用

1.调用render函数渲染

a.渲染数字

ReactDOM.render(<div>123</div>, document.getElementById('app'))

这样也可以，直接把<div>123</div> 当作一个对象

·let a=10

ReactDOM.render(<div>{a}</div>, document.getElementById('app'))

·let a=10

ReactDOM.render(<div>{a+2}</div>, document.getElementById('app'))

b.渲染字符串，渲染布尔值

·let str='你好，中国'

let boo =true

ReactDOM.render(<div>

{a+2}

<hr/> //分割线

{str}

<hr/>

{boo ? '条件为真'：‘条件为假’}

</div>, document.getElementById('app'))

c.为属性绑定值

·let title='999'

ReactDOM.render(<div>

<p title={title}>这是P标签</p>

</div>, document.getElementById('app'))

//什么情况下需要使用{}呢？

//当我们需要在JSX控制的区域内，写JS表达式了，则需要把JS代码写到{}中

const h1=<h1>恍恍惚惚</h1>

ReactDOM.render(<div>

<p title={title}>这是P标签</p>

{h1}

</div>, document.getElementById('app'))

d.渲染JSX元素的数组

const arr=[<h2>这是h2</h2>

]

ReactDOM.render(<div>

{arr}

</div>, document.getElementById('app'))

e.将普通字符串数组转为JSX数组并且渲染到页面上【两种方案】

(1)

const arrStr=[‘毛利’,’柯南’,’小五郎’，‘灰原哀’]

//定义一个空数组，将来用来存放名称标签

const namearr=[]

arrStr.forEach(item=>{

const temp=<h5>{item}</h5>

nameArr.push(temp)

})

ReactDOM.render(<div>

{nameArr}

</div>, document.getElementById('app'))

(2) 数组的map方法，比需要写上return

ReactDOM.render(<div>

{arrStr.map(item=>{

return <h3>{item}</h3>

})}

</div>, document.getElementById('app'))

五、React和vue中key的作用

React中需要把key添加给被forEach或 map或for循环直接控制的元素。

const namearr=[ ]

arrStr.forEach(item=>{

const temp=<h5 key=(item)>{item}</h5>

nameArr.push(temp)

})

ReactDOM.render(<div>

{arrStr.map(item=>{

return <h3 key=(item)>{item}</h3>

})}

ReactDOM.render(<div>

{arrStr.map(item=>{

return <div key=(item)><h3 >{item}</h3></div>

})} //把key添加给被forEach或 map或for循环直接控制的元素.

<ul>

  <li>1</li>

  <li>2</li>

</ul>

<ul>

  <li>1</li>

  <li>3</li>

  <li>2</li>

</ul>

在上面的例子中我们试图在tree1中插入一个子元素。这时候react并不会执行插入操作，他直接会移除原先的第二个子元素，然后再append进去剩下的子元素，而其实我们这个操作只只需要一个insert操作就能完成。为了解决这种问题，react需要我们提供给一个key来帮助更新，减少性能开销。

在上面的例子中如果我们给每个li元素添加一个key属性情况就会得到优化。

<ul>
  
<li key='1'>1</li>
  
<li key='2'>2</li>
</ul>
 
<ul>
  
<li key='1'>1</li>
  
<li key='3'>3</li>
  
<li key='2'>2</li>
</ul>

这个时候react就会通过key来发现tree2的第二个元素不是原先tree1的第二个元素，原先的第二个元素被挪到下面去了，因此在操作的时候就会直接指向insert操作，来减少dom操作的性能开销。

我们要如何选择key

大部分情况下我们要在执行数组遍历的时候会用index来表示元素的key。这样做其实并不是很合理。我们用key的真实目的是为了标识在前后两次渲染中元素的对应关系，防止发生不必要的更新操作。那么如果我们用index来标识key，数组在执行插入、排序等操作之后，原先的index并不再对应到原先的值，那么这个key就失去了本身的意义，并且会带来其他问题。
例如：数组a=['a','b','c']；这个时候原先的0对应的是'a'，1对应的是'b',依次...,如果我们对数组进行依次reverse操作，那么这个时候0就对应成了'c',2变成了'a'。这样的导致的除了效率问题还可能会产生额外的bug。
所以我们在选择key的时候一定要选择能和数据一一对应的值。如果找不到这个值可以参考下面操作。

var key = 0;
//可以是任何的id generator
function id(){
  return  String(++key);
}
//任意的数组或者待遍历的数据
data.forEach((item)=>{
  if(!item.id){
    item.id = id;
  }
})

通过上面的方法我们手动给数组的每个元素添加一个唯一的标识id.