博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
React中那些纠结你的地方(一)
阅读量:5973 次
发布时间:2019-06-19

本文共 1564 字,大约阅读时间需要 5 分钟。

React太灵活了特别是配上了es6之后,它就像泥沙里的泥鳅,越想抓住越是抓不住;除此之外我在使用react的时候时不时的会有些纠结

1.组件中有很多事件处理,到底是使用一个方法+switch呢?还是每个事件写一个方法?

//1. one function + switch patternclass OneFunSwitch extends Component {    handleChange = (e)=>{    let {type} = e.target.dataset;    /**  switch--case--default  **/  }  render(){    return(      
{/** ...more evenet **/}
) }}// 2. multiple functon patternclass MultipleFun extends Component { handleNameChange = ()=>{} handleAgeChange = ()=>{} handleSubmit = ()=>{} render(){ return(
{/** ...more evenet **/}
) }}

上面2钟方式,你在开发中经常使用哪一种?还是说看心情来,<_>

2. 通过那种方式进行事件绑定和参数传递?主要有以下几种方式

// 1. 使用 es6 arrow function class ArrowFun extends React.Component {  click(){ /** click... **/ }  render(){    return(      
) }}// 以上2种方法等效,看上去这种写法还是很不错的,但是因为函数无法像数据那样走diff算法,所以组件会做浪费的渲染// 2. 通过构造函数进行this绑定class ArrowFun extends React.Component { constructor(props){ super(props); this.click = this.click.bind(this); } click(){ /** click... **/ } render(){ return(
) }}// 相对第一种,是解决了多余render问题,但是好像没啥好的办法进行参数的传递,同时还多了一行代码。// 3. 使用class-propertiesclass ArrowFun extends React.Component { constructor(props){ super(props); } click =()=>{ } render(){ return(
) }}// 相对前2种,貌似这种最好了;但是需要注意的是1. 类属性还不是es规范,2.同样面临参数传递的问题

好吧,该用哪一种呢?任意用吗?

~~~未完待续

转载地址:http://wudox.baihongyu.com/

你可能感兴趣的文章
MySql 学习(一)
查看>>
poj2006
查看>>
poj2722
查看>>
[开源]KJFramework.Message 智能二进制消息框架 - 新能力!
查看>>
设备管理器进行锁屏和数据清除等功能
查看>>
POJ 2763 Housewife Wind
查看>>
6.控制器(ng-Controller)
查看>>
IT行业怎么了?程序员按时上下班也被开除
查看>>
vue中使用scss
查看>>
vue----webpack模板----vuex----modules子模块
查看>>
剑指offer 面试题33 把数组排成最小的数
查看>>
采购订单单价异常控制
查看>>
Oracle EBS-SQL (SYS-20):OPM接口处理.sql
查看>>
循序渐进Python3(十)-- 4 -- paramiko
查看>>
codeforces Rockethon 2015 C Second price auction [想法]
查看>>
[1]区分event对象中的[clientX,offsetX,screenX,pageX]
查看>>
发送 email 过程
查看>>
城市里的间谍B901
查看>>
sass方式实现颜色平铺(红色--->紫色)
查看>>
JS入门
查看>>