React学习笔记之React渲染

系列文章目录

---

前言

React的使用其实基本离不开JSX，JSX是JavaScript的扩展语言。基本上可以理解为在JavaScript中写html。

一、基本渲染

使用 { } 可以在html元素中加入JavaScript代码

let name = 'peter';
let temp = <div>hello{name}{1 + 1}</div>;
ReactDOM.render(temp, document.getElementById('one'));

在{ }中写的内容是JavaScript代码，但需要注意的是Boolean类型的值是无法显示的需要转换为字符串。

二、条件渲染

条件渲染实际上是用JavaScript代码去判断条件并给React元素赋值。

可以用三目运算符或者是if else 去判断条件。

let flag = false;
let temp2 = flag ? <div>is true</div> : <div>is false</div>
 ReactDOM.render(temp2, document.getElementById('one'))

let flag = false;
 if (flag) {
     let temp2 = <div>is true</div>
 }
 else {
     let temp2 = <div>is false</div>
 }
 ReactDOM.render(temp2, document.getElementById('one'));

三、列表渲染

列表渲染的思想也是一样，结合html元素和JavaScript，先遍历数组，根据数组每个项的属性生成相应的html元素。

let list = [
    { name: 'zhangsan', age: 21 },
    { name: 'lisi', age: 22 },
    { name: 'baike', age: 21 }
];

let temp3 = <ul>
    {list.map((item, index) => {
        return <li key={index}><span>{item.name}</span><span>{item.age}</span></li>
    })}
</ul>

ReactDOM.render(temp3, document.getElementById('one'));

总结

学到这里发现实际上React的思想就是使用JS生成html。和Vue的不同的是Vue提供了一些组件内的方法比如v-if、v-model等实现渲染，而React几乎就是使用原生的js代码。