react笔记（二）

常用语法基础

列表渲染

类似vue中的v-for，react中也有类似的列表渲染方法。首先我们知道，在jsx中标签即是变量，因此我们可以创建一个标签数组。可以借助map等函数，实现值到标签的映射。

giftMsg=["123","345","567"];
const giftMsgs = giftMsg.map((item,index)=>{
  return (<Text>{item}</Text>)
})

如上，通过map，映射出一个组件数组，该数组可以被jsx解析。

条件渲染

由于react组件本质是函数，所以渲染什么内容完全可以自己确定，渲染回调是return，我们可以控制这个return放回我们想要的内容，可以在return里面加入逻辑，代码示例如下：

if(a)
  return (
	{
	  b?
	  <p>1</p>
	  :
	  <p>2</p>
	}
  )
else
  return (
	<p>3</p>
  )

ref

react要操作底层节点，除了数据驱动外，还可以用ref转发。

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// 你可以直接获取 DOM button 的 ref：
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

如上，官方文档的资料，通过转发，我们可以通过ref直接操作底层dom节点。

生命周期

回顾一下vue的生命周期：

• beforeCreate（创建组件前）
• created（创建组件后）
• beforeMount（挂载前）
• mounted（挂载后）
• beforeUpdate（更新前）
• updated（更新后）
• beforeDestroy（销毁前）
• destroyed（销毁后）

react与vue有部分相似，但也有区别：

​ nextProps与nextStates表示下一状态。

• componentWillMount （挂载前）
• componentDidMount 挂载后，在挂载前和挂载后之间会调用第一次render
• componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用，此生命周期可以setState
• shouldComponentUpdate （更新前确认）返回false则不执行render
• componentWillUpdate（确认更新前）
• componentDidUpdate （更新后）
• componentWillUnmount（销毁前）

生命周期的作用就是提供钩子做一些操作。而且生命周期是MVVM框架必然的结果，要形成一个循环渲染的环。

性能优化

降低渲染频率

与传统web优化由于，频繁的dom修改会导致回流，影响性能。

因此，在有虚拟dom之后，我们依旧要减少state的频繁操作，比如把多次state操作合并一次。对于不影响渲染的state，我们可以在 shouldComponentUpdate 生命钩子中进行操作，return一个false，减少render的次数从而提高性能。

借助key减少dom的操作量

key的作用可以用来帮助虚拟dom做好区分，是diff算法的关键一环。

比如说列表渲染的时候，如果中间删除掉某个节点，在设置好key之后，虚拟dom会自动以最少步骤完成变化。如果没有key，虚拟dom不清楚节点的对应关系，会按顺序一一对比，这会导致本没有变化的节点被判定为发生了变化，影响了性能。