常用语法基础
列表渲染
类似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不清楚节点的对应关系,会按顺序一一对比,这会导致本没有变化的节点被判定为发生了变化,影响了性能。