vivox9sL为什么在看电影的时候会自动vivo熄屏时钟

来源：蜘蛛抓取(WebSpider) 时间：2017-10-01 16:15 标签： vivo熄屏时间
ReactJS读书笔记三：组件的组合和通信
一&组合而不是继承
React组件是无法继承的，即不存在 React.extend 之类的方法可以定义一个子类。
React推崇通过组合的方式来组织大规模的应用。
所以所谓父子组件，就和DOM中的父子元素一样，他们是有从属关系，但没有继承关系。
var Team = React.createClass({
render: function() {
return &div&Team onwer is: &People name={this.props.name}&&/People&&/div&;
var People = React.createClass({
render: function() {
return &span&{this.props.name}&/span&;
React.render(
&Team name='Lucy' /&,
document.getElementById('example')
我们有一个父组件 Team，里面有一个子组件 People。
Team和People并不存在谁继承谁，只是&People 组成了 Team 而已。
大家都知道面向对象三个特性：封装、继承和多态。其中继承当然不是错的，但是确是争议最大的一个。可以参见这篇文章：
很多时候，继承是可以通过interface之类的方式来完成的。
二 父子组件通信
组合起来很简单，那么父子组件怎么通信呢。
你可能会想通过事件来通信。React&竟然没有提供一个自定义事件，它的事件仅仅用来处理DOM事件，并没有组件的自定义事件。
比如一个子组件是无法通过&trigger(“hungry”) 之类的事件来通知父组件的。当然，你可以通过mixin之类的方式来给组件提供事件能力。
那么这样，就只有一种方式可以让子组件向父组件发送消息，就是 this.props&属性。
比如 父组件需要知道子组件的&hungry 事件，那么他向子组件传递一个 props.onHungry 方法。这样子组件通过调用 this.props.onHungry 就可以通知父组件。
而父组件怎么通知子组件呢？
也是通过 props，直接 setProps 来修改子组件的 props就行了。
这样，实际上 props 是父子组件通信的最重要的甚至是唯一的标准渠道。
看一个例子，还是上面的例子，稍作改动：
var Team = React.createClass({
onHungry: function(name) {
alert(name + & is hungry&);
render: function() {
return &div&Team onwer is: &People name={this.props.name} onHungry={this.onHungry}&&/People&&/div&;
var People = React.createClass({
render: function() {
return &span onClick={this.handleClick}&{this.props.name}&/span&;
handleClick: function() {
this.props.onHungry(this.props.name);
var team = React.render(
&Team name='Lucy' /&,
document.getElementById('example')
点一下 Lucy 就会alert一下。
Team 组件通过&props.onHungry 传给了&People 组件一个回调，这样 People 组件就通过调用这个方法来通知Team。
这是子组件向父组件发送消息的方式。
那么父组件怎么向子组件发送消息呢。更简单了，直接修改&props &就行了
team.setProps({name: “Lily”})
因为&props 是父子组件的通信渠道，为了避免状态不一致，所以严格杜绝组件修改自己的状态。
可以通过 team.setProps 方式修改，这属于组件外修改，但是不能在组件中 通过 this.setProps 方式来修改。
那么现在有一个问题，React是如何知道一个组件的 props 被他的父组件修改了？
我们把上面的代码改一下：
var Team = React.createClass({
getInitialState: function() {
name: &Lucy&
onHungry: function(name) {
alert(name + & is hungry&);
render: function() {
return &div onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}&Team onwer is: &People {...this.state} onHungry={this.onHungry}&&/People&&/div&;
onMouseOver: function() {
this.setState({
name: &mouseOver&
onMouseOut: function() {
this.setState({
name: &mouseOut&
var People = React.createClass({
render: function() {
return &span onClick={this.handleClick}&{this.props.name}&/span&;
handleClick: function() {
this.props.onHungry(this.props.name);
var team = React.render(
&Team name='Lucy' /&,
document.getElementById('example')
这样，Team把& this.state.name 作为 props 传给了&People 。
Team每次通过&this.setState 来修改state.name 的时候，People都会进行更新。
猜测是 setState 和 setProps 这两个方法会触发组件的更新。并且会触发每一个子组件检查更新。
看过本文的人也看了：
我要留言技术领域：
取消收藏确定要取消收藏吗？
删除图谱提示你保存在该图谱下的知识内容也会被删除，建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗？
删除节点提示无法删除该知识节点，因该节点下仍保存有相关知识内容！
删除节点提示你确定要删除该知识节点吗？问题： (react.js)angular和react各自有什么优缺点
描述:angular和react各自有什么优缺点？怎么对两者进行取舍？目前是有个大的项目要重构，因为之前没有使用过市面上的各种MV*框架，所有现在在考虑是否要使用react来管理view，但是毕竟只是view，所以在想是不是不直接上angular。解决方案1:其实我突然觉得尤小右在vue官网的介绍很好啊，要不看看：解决方案2:关于Angular和React，其区别其实非常之大。Angular是一个MVC框架，因为其涵盖MVC全部的内容，所以它几乎能代替大部分后端的工作，特别是其双向数据绑定等功能，可以说使用相当方便（但学习成本也高）。但缺陷就是Angular过重，前端大部分情况下并非需要一个完整的MVC框架，因为大部分逻辑应该交给后端来完成。这也导致了Angular永远无法登上台面，一个正常的网站不会容忍一个为了功能全面而大幅消耗性能的框架。所以Angular大部分时候只能藏于身后，在一些后台管理页面中使用。React则不同，其最大的优势就是其轻量级，Facebook看到了前端使用MVC框架的劣势，而前端大部分时候只有View的操作，所以React只着重于View层的开发。特别是其Virtual DOM的思维，大幅提升前端页面渲染的速度。由于其轻量级，所以得以在大流量网站上使用，例如React研发所针对的Instagram上已经使用，还有阿里版变种的Weex也用在淘宝等网站有所使用。两者最大的区别就是轻和重的区别，建议就是，大访问量轻逻辑的页面用React，小访问量重逻辑的页面用Angular。解决方案3:居然有人说React不是框架 强行轻量化 你用的时候难道不是react-route+redux+react全套一起用angular1说实在的，没有什么缺点，一个五年的框架，该踩的坑都踩完了，想做双向绑定，除乐avalon那种用vbs玩花样，只有dirty check可以兼容ie8至于架构，设计复杂不是他的错啊，本身angular就是大而全的框架，唯一少的就是状态管理然后react，也是那样，配上redux这个东西，实现状态管理，未来大应用的方向，话说angular2也能redux了再有我不认为ecma6是优势 语法就是语法糖，没有什么本质的改变（真的是质变的是ie9+支持getter/setter了）java那么复杂的语言都写习惯了区区js而已真的有人认为react本身（不算webpack）那种js html混写很好么？太反人类了吧解决方案4:Angular 的看这里：https://ruby-china.org/topics/27590#reply7
上一篇： 下一篇：

我要回帖

更多关于 vivo熄屏时间 的文章

 

随机推荐