博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
React 组件开发注意事项
阅读量:5766 次
发布时间:2019-06-18

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

0.state的设定原则,如果render里用不到,则就不应该是一个state。

1.数组遍历时,用每一条数据的唯一标识作为key,尽量不要使用遍历的索引值作为key,如果它们从不重新排序,它们工作也很好,但是如果存在重新排序,性能将会很差。
2.处理事件,推荐使用属性初始化语法,如下:

class LoggingButton extends React.Component {  // 这个语法确保 `this` 绑定在 handleClick 中。  // 警告:这是 *实验性的* 语法。  handleClick = () => {    console.log('this is:', this);  }  render() {    return (          );  }}

3.条件渲染,推荐使用&&语法,如下:

function Mailbox(props) {  const unreadMessages = props.unreadMessages;  return (    

Hello!

{ unreadMessages.length === 0 &&
没有数据! } {unreadMessages.length > 0 &&

You have {unreadMessages.length} unread messages.

}
);}

4.组件名称总是以大写字母开始。

5.从组件本身的角度来命名 props 而不是它被使用的上下文环境。
6.所有 React 组件都必须是纯函数,并禁止修改其自身 props 。
7.善用setState

this.setState((prevState,props) => ({   xx: prevState.xx + props.yy}));

8.如果 map() 体中有太多嵌套,可能是提取组件(组件拆分遵循一个常用的技巧是单一职责原则,即一个组件理想情况下只处理一件事)的好时机。

9.react组件创建时推荐组合的方式创建,不推荐继承的方式。如果要在组件之间重用非 U I功能,我们建议将其提取到单独的 JavaScript 模块中。组件可以导入它并使用该函数,对象或类,而不扩展它。
10.如果在输出中想要渲染 false ,true,null 或者 undefined ,你必须先将其转化为字符串。
11.获取组件内DOM元素推荐使用回调函数(ref={input=>this.inputText=input})的方式并且对父组件暴露 DOM 节点,不要使用string类型(ref="inputText")的方式(此API有被移除的可能)。使用ref+不受控组件是快速开发的一种手段,适合代码质量要求不高的工程。
12.组件state的变化,普通的js数据类型没有问题,对于引用数据类型(数组,对象),要注意数据的不可变性,比如数组中增加/删除/修改一条数据要保持原数组不变,同时返回一个新数组(es6展开语法[...oldArr,'newEle'],{...oldObj,newEle},filter的灵活应用),使用新数组修改state,推荐使用Immutable.js。
13.自15.6.1开始不推荐MIXIN,原来的react-addons-pure-render-mixin由React.PureComponent代替。
14.高阶组件是一个容器,内部要组件,不要修改包裹的组件,实际产品中应用较少,不用太纠结。
15.setState() 并不总是立即更新组件。它可能会批量或延迟到后面更新。这使得在调用 setState() 之后立即读取 this.state 存在一个潜在的陷阱。而使用 componentDidUpdate 或 setState 回调(setState(updater, callback)),在应用更新后,都将被保证触发。
当第一个参数为对象时,可能会setState执行也是异步的,可能把同一周期的多个调用合并在一起执行。所以多次修改同一个变量,可能只修改一次,在此需要使用函数的方式更新。

转载于:https://www.cnblogs.com/crazycode2/p/9094162.html

你可能感兴趣的文章
bashrc和profile区别,su和su -区别
查看>>
/etc/resolv.conf文件自动恢复配置问题
查看>>
c语言:浪漫的putchar(),用数字向女朋友表白吧(ps:单身汪勿入)
查看>>
linux 文件共享
查看>>
Android编程规范
查看>>
Rolling cURL: PHP并发最佳实践
查看>>
SecureCRT 用ssh key登录
查看>>
python浓缩(20)
查看>>
自考学生要做到"三个学会"
查看>>
H3C交换机只能启动到BootWare扩展字段,无法启动到应用配置界面
查看>>
CENTOS 6.2 系统网卡更换后的设置方法
查看>>
使用tenine/nginx 替换apache2 实现rgw前端
查看>>
配置vnc服务
查看>>
Centos Minimal网络配置
查看>>
JQuery选择器大全
查看>>
nginx启动脚本编写及设置开机自启动
查看>>
nginx中的rewrite语句
查看>>
C#版二分查找(代碼)
查看>>
Cacti完全使用手册 ( 让你快速个性化使用Cacti )
查看>>
电脑族养生 从养肝开始
查看>>