React

  • 一个用于构建用户界面点js库

特点

  • 声明式
  • 基于组件
  • 学习一次，随处使用

方法说明

  • React.createElement(a,b,c)
    • a:元素名称
    • b:元素属性
    • c:元素子节点
  • ReactDOM.render(a,b)
    • a:要渲染点元素
    • b:dom对象

JSX

  • js XML 的简写，表示在js代码中写XML格式的代码
  • 注意点
    • 元素的属性名使用驼峰命名法
    • class->className;for->htmlFor;tabindex->tabIndex
    • 推荐使用小括号包裹JSX，避免JS中自动插入分号陷阱

{}

  • 类似于VUE中{{}}
  • 注意点
    • 单大括号中可以使用任意点js表达式
    • js对象不能出现，只会出现在style属性中
    • 不能在{}中出现语句（比如if/for）

JSX的条件渲染

  • 可以使用if/else
  • 可以使用三元运算符
  • 可以使用逻辑与运算符

JSX的列表渲染

  • 需要渲染一组数据，应使用数组的map()方法
  • vue借鉴react，需要有个key,且值要保证唯一
const list=(
	<ul>
  		{data.map(item=><li key={item.key}>{item.name}</li>)}
  	</ul>
)
  • 原则map()遍历谁，就给谁添加key属性
  • 注意尽量避免使用索引号作为key

JSX的样式处理

  • 行内样式-style
<h1 style={{color:'red',backgroundColor:'skyblue'}}>  
</h1>

  • 类名-className