jsx是javascript XML的简写，即为在js代码中写HTML（XML）格式的代码

react包中createElement的问题

  1. 不简洁
  2. 不优雅
  3. 不直观

image.png

jsx用于解决不直观的问题，提升开发效率

使用注意事项

  1. react属性全部驼峰
  2. class = className for = htmlFor tabindex = tabIndex
  3. 没有子节点的元素可以用/>结束
  4. 推荐使用（）来包裹JSX语法避免js自动加入分号导致报错
  5. 变量用{}单括号，注意这里和vue中不一样{{}}
  6. 行内样式 style = {{ color: “red”, backgroundColor: “blue”}}

image.png

条件渲染

  1. const loadData = (loading) => {
  2.   if (loading) {
  3.     return <div>loading</div>
  4.   } else {
  5.     return <div>Data</div>
  6.   }
  7.  // 逻辑运算符优化
  8.   //  return loading ? (<div>loading</div>): <div>Data</div>
  9. }
  11.   {loadData(isLoading)}

列表渲染

使用map，因为map有返回值

  1.   //列表渲染
  2.   let list = [1,2,3,4,5,5,6] 
  3. <ul>
  4.      {list.map((item,index)=> <li key={index + item}>{item} map项</li>)} 
  5.    </ul>