React学习笔记六：渲染列表&虚拟DOM

1. 渲染基础数据

const name = '孙悟空';
const lang = 'en' // cn
let div;
if(lang === 'en'){
    div = <div>hello {name}</div>
}else if(lang === 'cn'){
    div = <div>你好，{name}</div>
}
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(div)

2. 渲染列表

const nameArr = ['孙悟空','猪八戒','沙和尚']
const list = <ul>{nameArr.map(item => <li>{item}</li>)}</ul>
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(list)

3. 虚拟DOM

// 创建数据
const data = ['孙悟空','猪八戒','沙和尚'];
// 创建列表
const list = <ul>
  {data.map(item => <li key={item}>{item}</li>)}
</ul>
// 获取根元素
const root = ReactDOM.createRoot(document.getElementById('root'))
// 渲染列表
root.render(list)

/*
* 在react中我们操作的元素被称为react元素，并不是真正的原生DOM元素；
* react通过虚拟DOM将react元素和原生DOM映射，虽然操作的react元素，但是这些操作最终会在真实DOM中提现
* 虚拟DOM的好处：
*   1. 降低API复杂度
*   2. 兼容性好
*   3. 提升性能
* 
* 每当我们调用root.render()时，页面就会发生重新渲染
* react推通过diffing算法，将新的元素和旧的元素进行比较
* 通过比较找到发生变化的元素，并且只对变化的元素进行修改，没有发生变化的不予处理；
**/

document.getElementById('btn').onclick = function(){
    // 创建数据
    const data = ['唐僧','孙悟空','猪八戒','沙和尚',];
    // 创建列表
    const list = <ul>
        {data.map(item => <li key={item}>{item}</li>)}
      </ul>
    // 渲染列表
    root.render(list)
}

/*
* 当我们在jsx中显示数组中，数组中每个约束都需要设置一个唯一的key，否则控制台会显示红色警告
* 重新渲染页面是，react会按照顺序依次比较对应的元素，当渲染一个列表时如果不指定我key，同样也会按照顺序进行比较，
* 如果不加key，当列表顺序发生变化时，可能导致性能问题出现（列表前面加入数据，列表所有数据重新渲染）
* 
* 为了解决这个问题，react为列表设计了一个key属性
* key相当于ID；只是无法在页面查看，当设置key以后不再按顺序比较，而是比较key
* key当前列表唯一即可
* 注意：
*  开发中一般采用ID作为key
*  尽量不要是用index作为key；（index会顺着数据变化而变化）
* 
*/