数据渲染

前面我们已经接触过数据渲染，本节我们再次对数据渲染进行说明。

数据渲染的原理

我们知道了一个界面的总局和样式，但我们却缺少需要呈现的真实数据。比如用户信息的一个页面，我们知道了某个位置要显示用户的名称，某个位置要显示用户的头像，但我们却无法直接知道用户的名称的值以及头像的样子。我们可以使用以下步骤完成。

1. 编写一个模板，这个模板上在用户名称和头像的位置使用占位符
2. 通过某种途径获取到用户的名称和头像图片（路径或id）。
3. 把获取到的这些数据将占位符替换掉
4. 将最后得到的内容展示在用户界面上

几种模板的写法

1. 变量/常量

   直接使用大括号包裹变量或常量，如<input value={tb.age} />或<input value={100} />

2. 条件判断

   条件满足才，如<input disabled={usr === 'admin'} />，再如const sex === 0 ? '男'：'女'

3. 循环

   一般使用map返回一个react的数组,如

   {data.map((it)=>{
       return <div>
       </div>;
   })}