开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 7 天，点击查看活动详情

React(2)

JSX

声明式编程：结果导向的编程
在react中，可以通过jsx创建react元素
jsx是js的扩展，jsx使得我们可以以类似于HTML的方式去使用js
要在react中使用jsx，必须要引入babel

引入babel后，要设置代码被babel识别

<script type="text/babel">

<script type="text/babel">
    const div = <div>
            我是jsx的div
            <button>你好</button>
        </div>
        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(div);
    </script>

jsx简化了react创建element

补充

jsx不是字符串，不要加引号
jsx中html标签应该小写开头，react标签大写开头
在jsx中可以使用{}嵌入表达式
jsx中有且只有一个根标签
jsx中的标签必须正确结束(自结束标签必须加/)
```
<input type='text'/>
```
如果表达式是空值，布尔值，undefined这些值，将不会显示

在jsx中，属性可以直接在标签中设置

const div1 = <div id= 'box' onClick={()=>{alert(123)}}></div>

jsx中设置style时，需要传一个对象,把样式名变成驼峰命名法

const div1 = <div id= 'box' onClick={()=>{alert(123)}} style={{backgroudColor:'red',border:'10px red solid'}}></div>

渲染列表

{}只能放表达式，不能放语句，

可以把jsx放到语句中

let div;
       let name = '孙悟空';
       let lang = 'en';
       if(lang === 'en'){
           div = <div>hello {name}</div>
       }else if(lang === 'cn'){
           div = <div>你好 {name}</div>
       }

jsx会将数组中的元素自动渲染

 const root = ReactDOM.createRoot(document.getElementById('root'));
    let arr = ['孙悟空','猪八戒','唐僧'];
    const data = arr.map(item => <li>{item}</li>);
    const div = <div>{data}</div>;
    root.render(div);

 const root = ReactDOM.createRoot(document.getElementById('root'));
    let arr = ['孙悟空','猪八戒','唐僧'];

    const div = <div>{arr.map(item=><li>{item}</li>)}</div>;
    root.render(div);

虚拟DOM

react通过虚拟dom将react元素和原生dom进行映射，虽然操作的是react元素，但是这些操作最后都会在真实的dom中生效
虚拟DOM的好处：降低api的复杂度，解决兼容问题，提升性能，减少dom不必要操作，
每当我们调用roo.render()时，页面就会进行重新的渲染，react会通过diffing算法，将新的和旧的进行比较，通过比较找到发生变化的元素，并且只对变化的元素进行修改，没有发生变化不予处理，
在比较数据时，react会比较父元素，父元素如果不同，直接所有元素都替换，父元素一致，在去逐个比较子元素，直到找到所有发生变化的元素为止
在渲染列表时，通常为列表设计一个唯一的key元素，从而不会让插入元素时，影响性能

开发过程中一般会采用数据的id作为key

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

用索引做key不能解决问题，索引会跟着元素的顺序变化，

当元素的顺序不会发生变化时，可以用索引做key

React学习之路(2)

React(2)

JSX

补充

渲染列表

虚拟DOM