react须知

1. JSX是什么？

1）JSX是一种facebook发明的语法。就是将HTML和JS 可以同时书写。其实是一种js的语法糖。

但是浏览器不能识别，需要通过babel-loader来转译。

@babel/core @babel/preset-react（将html标签转为js代码）

2) const temp = <div>temp</div>;上面是JSX语法的代码。

// 整个是个js赋值运算，=右侧是html代码；是html和js的混写。

babel-loader将其转为js,如下：

React.createElement(component, props, ...children) // 返回一个js对象，含有type,props等属性。然后等待被ReactDom.render渲染成真实DOM。

2.两种组件都要求首字母大写

React会将以小些字母开头的组件视为原生DOM标签。所以自定义组件名必须以大写字母开头！！

当小写字母时，第一个参数被解析成字符串。

当大写字母时，将其解析成Class或者函数组件。

3. jsx的{}不能运行语句

jsx代码分为js标签和{}; 后者要求里面是表达式或者变量。

语句没有返回值。

<div>
   {text}
</div>

1）if语句和for循环是语句，不是js表达式；不能使用在{}中

2) 三目运算符是虽然js表达式，可以使用；但是根据eslint规范，不能嵌套使用。

4. className不能写成class; htmlFor属性不能写成for

1) 因为jsx很大程度上还是遵循的js的规约。而js中使用小驼峰命名规范。

2) 在js中，class是js中的保留字，表示类；js中for是保留字，for循环。

5.key属性

1.key属性要求兄弟节点间唯一

不要求全局唯一。

所有通过map遍历生成的同级列表都要有一个唯一的key值。用于DOM DIff算法(同级同类型比较)的性能优化。

<div>
  {
    ([1,2,3]).map(item => <span key={item}>{item}</span>)
  }
</div>

同级先比较key值，如果key值相同，再比较类型和属性等。如果都相等就不需要删除新增元素。依次比较。

如果最后所有元素都相同，只是位置发生变化，那么只需要更换元素位置；不需要删除重建。提高性能。

2. key属性只传递给React

不会传递给组件。所以在props对象中，props.key读取不到, 返回undefined。

6.style属性

有两个{};外层括号表示是表达式括号；内部表示是个对象。

<div style={{color: red}}>
  style属性
</div>

7.html字符串模版渲染

<div dangerouslySetInnerHTML={{_html: '<input />'}}>
   // 使用dangerouslySetInnerHTML属性渲染字符串模版
   // 否则直接渲染成字符串
</div>

8. Props只读

react有一个严格的规则： 必须像纯函数一样保证他们的props不被修改。

9. 不能渲染的数据

true,false, undefined, null都不能渲染。

<div />
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>

// 全部等价

但是对于运算符表达式返回布尔值，但是本身不是布尔值的，还是可以渲染。

<div> 
   {
      this.state.data.length && <div>sth</div>
   }
</div>
// 如果值是[],length为0，虽然表达式是false，但是本身还是渲染0
// 应该
<div> 
   {
      this.state.data.length > 0 && <div>sth</div>
   }
</div>