React学习笔记之六(PropTypes,无状态函数组件)

通过定义模块化的组件,可以很方便的重用,组件化分解了关注点(这个是MVC思想一直提倡的),让程序具有更好的扩展性。组件之间包含的其它组件成为child,使用this.props.children来获取,这是一个不透明的对象,使用React.Children定义的好的方法或属性(forEach,map等)

子组件的调解

通常情况下,子组件根据它们存在的顺序来渲染。例如:

如果移除Hello的span标签,在React里面将会通过改变第一个子元素的文本内容,然后删除最后一个子元素。大部分情况下,这都不是一个大问题,但是如果遇到维持了状态数据的组件,这就非常有问题。不是直接删除最后一个子元素,而是display:none,当子组件是动态构建(map或forEach),需要显示指定key属性了。React会保证所有的具有key的子元素重排或者销毁。

 

数据流(Data Flow)

再说,React中的数据从父级留下子级,方式是通过props。把这个成为单向数据绑定,这个过程会递归的发生,数据的变化会自动反映到使用的地方。

 

关于性能上一点思考

如果一个父级下面有大量的子级元素,这样如果改变数据,那么会不会消耗性能呢?其实不必太担心,因为在javascript里面操作还是非常高效的。大部分的瓶颈不在于javascript,而是DOM的改变。React针对这个通过批量处理,探测变化的方式进行了优化。当然,如果我们想完全控制组件的是否更新,可以重写shouldComponentUpdate()方法,返回false即可,React就会跳过处理。

 

props的校验

组件对外使用时,为了保证正确性,内部对props设置一些校验,并且在组件接收了不符合校验规则的数据时,可以在控制台打出警告信息。这些校验规则通过React.PropTypes来设置,默认情况下在React都是可选的,下图列出所有的可以设置的校验:

 

 

例如:知道obj属性为number类型,如果传递“123”为字符串,则控制台会警告

 

限制传入的子元素个数

 

给属性设置默认值(属性abc)

 

mixins

组件是React里面最好的重用代码的方式,但是有时不同的组件之间可能需要共用一些函数,称为“横切关注点”。React提供了mixins机制,将定义的函数添加到mixins里面,并且会按顺序执行。

 

无状态的函数

可以定义一个普通的函数作为React的类(无状态的函数),例如:

这种方式定义的组件,不能维持状态(无状态的函数),也不支持实例,不能使用ref。如果需要查找无状态的组件,那么需要包裹在有状态的组件里面设置ref,然后查找。理想情况下,大部分组件都应该是无状态的,可以具有更好的性能。

 

本文参考原文:

https://facebook.github.io/react/docs/multiple-components.html

https://facebook.github.io/react/docs/reusable-components.html

reactjs
作者:张雪飞
出处:https://zhangxuefei.site/p/1404
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注