react涉及的三个api，jsx注意事项，渲染列表，虚拟dom产生的问题

最新推荐文章于 2024-06-04 12:18:33 发布

pqxpq

最新推荐文章于 2024-06-04 12:18:33 发布

阅读量146

点赞数

分类专栏：转前端(html+css+js) 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_52563729/article/details/127192612

版权

转前端(html+css+js) 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

三个api

三个API
React.createElement()
        1.React.createElement(type,{props}, [ ...children])
        2.用来创建React元素
        3.React元素无法修改，只能通过新元素去替换
        参数注意问题
        1.在html中我们不区分大小写但是这个函数里面,我们的type必须是小写
        2.{props}:设置事件的时候我们必须使用驼峰命名法比如 onclick必须写成onClick，并且onClick的值必须是一个函数！
        例子  onClick：()=>{alter("你点我干嘛")},
        3.class最好写className来设置
        4.往后面加参数都会加在内容上面

        提示我们操作的是虚拟dom，我们的操作dom映射的时候会智能的选择怎么执行，只会改变发生变化的。


ReactDOM.createRoot(),这个函数是拿来找插入位置的
        1.createRoot(container[, options]) 
        2.用来创建React的根容器，容器用来放置React元素
        最开始是createrRoot()和render是整和到一起的

root.render()
        1.root.render(element)
        2.当首次调用时，容器节点里的所有DOM元素都会被替换，后续的调用则会使用
        React 的 DOM差分算法(DOM diffing algorithm）进行高效的更新。
        3.不会修改容器节点(只会修改容器的子节点)。可以在不覆盖现有子节点的情况下，
        将组件插入已有的 DOM节点7中。

jsx注意事项

1.jsx不是字符串不需要加引号


2.jsx中html标签应该小写开头，react组件应该大写开头


3.jsx中只有一个根标签
错误写法const div = <div></div><div></div><div></div>,意思就是要嵌套对


4.jsx的标签必须正确结束(自结束标签必须写:/不能省)


5.jsx中可以使用{}嵌入表达式 
例子:name会被认为是字符串name，{name}会被看成变量表达式，但是里面只能写有值的语句不能写if这些句子


6.{}如果这里面表达式是空值，布尔值，undefined这些值就不会显示


7.jsx中，属性可以直接在标签中设置
const div=<div id="box" onClick>={()=>{alert('哈哈')} className="class"}>我是一个div</div>

7.1 class需要使用className代替

7.2我们的style写法也和其他的不一样了，
1传的必选是对象,-取消，改成驼峰命名法
2.style={{backgroundColor:"yellow",border:'10px red soild'}}

渲染列表


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渲染列表</title>
    <!--引入react的核心库-->
    <script src="D:\源码\4.react\0.script\react.development.js"></script>
    <script src="D:\源码\4.react\0.script\react-dom.development.js"></script>
    <script src="D:\源码\4.react\0.script\babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <div id="root2"></div>
    <script type="text/babel">
        /*
        {}里面只能放js表达式，而不能放语句(if for等等)

        但是语句里面可以放jsx表达式！！！！！！！！
        */
        let temp;
        const lang='2' 
        const name='孙悟空'
        if(lang==='1'){
            temp = <div>hello {name}</div>
        }else{
            temp= <div>hello bu {name}</div>
        }
        const root = ReactDOM.createRoot(document.getElementById("root"));
        root.render(temp);


       jsx会将数组元素自动渲染展开,但是这样会没有标签！！！！！
        <ul>
            <li>     </li>
            <li>     </li>
            <li>      </li>
            </ul>
            所以用map函数！！！！

        const data=['1','2','3'];
        const list=<ul> {data.map(item=><li>{item}</li>)}</ul>;
        const root1 = ReactDOM.createRoot(document.getElementById("root2"));
        root1.render(list);


    </script>
</body>
</html>

虚拟dom产生的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渲染列表</title>
    <!--引入react的核心库-->
    <script src="D:\源码\4.react\0.script\react.development.js"></script>
    <script src="D:\源码\4.react\0.script\react-dom.development.js"></script>
    <script src="D:\源码\4.react\0.script\babel.min.js"></script>
</head>

<body>
    <button id="btn">点我一下</button>
    <hr>
    <div id="root2"></div>
    <script type="text/babel">
        const data=['1','2','3'];
        const list=<ul> {
            data.map(item=><li key={item}>{item}</li>)}
            </ul>;
            
        const root1 = ReactDOM.createRoot(document.getElementById("root2"));
        root1.render(list);

        //我们通过按钮去修改那个数据,只会修改我们改变了的东西
        //比较两次数据的时候先比较父元素(就是标签类型),如果父元素不同那么就直接替换,如果相同再去逐个比较子元素


        document.getElementById('btn').onclick=function(){
            console.log(data);
            //重新渲染
            const data=['1','4','3'];
            const list=<ul> {data.map(item=><li key={item}>{item}</li>)}</ul>;
            const root1 = ReactDOM.createRoot(document.getElementById("root2"));
            root1.render(list)
        }
        注意我们在jsx中显示数组中，数组中每一个元素都需要设置一个唯一的key，否则控制台会显示红色的警告
        为什么？因为react默认按照顺序比较，如果不加标识，在数组前面插入元素的时候，元素的顺序会发生变化！！！！就会出现问题
        全部重新渲染会造成性能消耗
        
        为了解决这个问题我们设置了key属性，相当于id，在页面中无法查看，当设置了key后我们根据key来比，而不会按照顺序比

        key在当前列表一定要唯一！
        1.开发过程一般用数据id作为key
        2.不使用索引做key，因为索引不会跟着数据改变，唯一的作用就是消除警告
    </script>
</body>
</html>