资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/React学习笔记—UI交互

React学习笔记—UI交互

spacewander / 983人阅读

摘要：事件机制实现了自己的一套事件代理和处理机制，这套机制是符合标准的。事件代理并没有将事件处理添加到相应的每个节点上。当启动时，在根节点上监听所有的事件，并管理事件到相应节点的映射。

props

先看个简单的例子：

var HelloWorld = React.createClass({
    render: function () {
        return (
            
{this.props.content}

        )
    }
});

React.render(
    ,
    document.body
);

看代码就很容易理解：通过this.props我们可以拿到组件使用时的属性。稍微改变下代码，我们打印出this.props瞅瞅：

var HelloWorld = React.createClass({
    render: function () {
        return (
            
{JSON.stringify(this.props)}

        )
    }
});

React.render(
    ,
    document.body
);

浏览器页面效果：

可以看出this.props就是组件的属性集合，稍微改下代码，再来看看：

var HelloWorld = React.createClass({
    render: function () {
        return (
            
{JSON.stringify(this.props)}

        )
    }
});

React.render(
    
        1
        2
    ,
    document.body
);

浏览器页面效果：

这个时候多了一个children的属性，React将组件的子节点封装到了children属性中，如果想获取到子节点的内容，可以这么写：

var HelloWorld = React.createClass({
    render: function () {
        return (
            

            {
                this.props.children.map(function (child) {
                        return child;
                })}
            

        )
    }
});

React.render(
    
        1
        2
    ,
    document.body
);

  
当子节点只有一个的时候直接通过this.props.children获取子节点。当子节点的个数大于1，this.props.children是一个数组。

综上我们可以看出，React将节点属性和子节点都封装到props当中，我们可以通过this.props获取到。在React的设定中，props是不可变的，当props属性确定后，我们不应该再去手动修改它。

一个陷阱

看下这个代码：

var Hello = React.createClass({
    render: function () {
        return (
            

        )
    }
});

React.render(
    
        
content

    ,
    document.body
);

咋一看是不是觉得页面渲染出来应该是这个效果：


    
content

实际上渲染出来是这样的：

看页面的渲染效果:我们要找到根节点，关注它的render方法的返回值。至于使用时的嵌套结构，看完props应该明白，这些都是组件属性，想要使用的话，请通过this.props.children.

state

state是同UI交互最重要的属性，看个简单的例子，点击按钮，切换按钮的颜色：

var ColorButton = React.createClass({
    getInitialState: function () {
        return {bColor: "green"};
    },
    render: function () {
        return (
            
        )
    },
    handleClick: function (event) {
        this.setState({bColor: this.state.bColor === "green" ? "red" : "green"});
    }
});

React.render(
    ,
    document.body
);

getInitialState是用来初始化state，handleClick是用来处理我们点击事件的。

事件机制

React实现了自己的一套事件代理和处理机制，这套机制是符合W3C标准的。通过这套机制，React有两个很重要的特点：

自动绑定

所有的事件处理函数当中的this指向组件的实例。如果想要拿到当前操作的DOM，通过参数event获取。

var ColorButton = React.createClass({
    getInitialState: function () {
        return {name: "button"};
    },
    render: function () {
        return (
            
        )
    },
    handleClick: function (event) {
        console.log(this.state);
        console.log(event.target);
    }
});

React.render(
    ,
    document.body
);
事件代理

React并没有将事件处理添加到相应的每个节点上。当React启动时，在根节点上监听所有的事件，并管理事件到相应节点的映射。当组件mounted或者unmounted时，事件将会被添加到映射关系或者被删除。我感觉，有点jQuery的事件代理的意思：

#糟糕的写法
$("li").on("click", function () {
    //todo
});

//好点的写法
$("ul").on("click", "li", function () {
    //todo
});
状态机

React将UI简单的看作状态机。看UI看作各种各样的状态，并在各种状态间切换，很容易保持UI的一致性。在React中，你只要改变组件的状态，就会重新渲染UI，React会在最有效的方式下更新DOM。

state工作原理

通过调用setState(data, callback)方法，改变状态，就会触发React更新UI。大部分情况下，我们不需要提供callback函数。React会自动的帮我们更新UI。

  
后面在好好看看这个callback的功能和调用时机。
什么样的组件该有state

大部分的组件应该从props属性中获取数据并渲染。但有的时候组件得相应用户输入，同服务器交互，这些情况下会用到state。React的官方说法是：尽可能的保持你的组件无状态化。为了实现这个目标，得保持你的状态同业务逻辑分离，并减少冗余信息，尽可能保持组件的单一职责。

React官方推荐的一种模式就是：构建几个无状态的组件用来渲染数据，在这些之上构建一个有状态的组件同用户和服务交互，数据通过props传递给无状态的组件。我的理解大概就是这样：

var RenderComponent = React.createClass({
    render: function () {
        return (
            
    
                {
                    this.props["data-list"].map(function (item) {
                        return (
  • {item}
    • )
                    })
                }
            

        )
    }
});


var StateComponent = React.createClass({
    getInitialState: function () {
        return {list: ["xxx", "yyy"]};
    },
    render: function () {
        return (
            

                
                
            


        )
    },
    handleClick: function () {
        this.setState({list: [1, 2, 3]});
    }
});

React.render(
    ,
    document.body
);
state应该包含什么样的数据

UI交互会导致改变的数据。

state不应包含什么样的数据

计算过的数据

组件

从props复制的数据

state应保含最原始的数据，比如说时间，格式化应该交给展现层去做。

组件应在render方法里控制。

海外云主机 云服务器 ui交互 ui交互设计 ui交互设计是什么 学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85616.html

相关文章

  • 好程序员React精品项目全集：商城管理后台（视频+源码+笔记）

    摘要：今天给大家带来了好程序员实战项目商城管理后台。配合项目学习会让你更快掌握它的使用方法下面就来看看好程序员这套实战项目课程介绍好程序员项目本项目是一个使用开发的商城系统的管理后台，里面登录判断，接口调用，数据展示和编辑，文件上传等后台功能。 众所周知，项目经验对于一个程序员变得越来越重要。在面...

    李世赞 评论0 收藏0

  • 7月份前端资源分享

    摘要：更多资源请文章转自月份前端资源分享的作用数组元素随机化排序算法实现学习笔记数组随机排序个变态题解析上个变态题解析下中的数字前端开发笔记本过目不忘正则表达式聊一聊前端存储那些事儿一键分享到各种写给刚入门的前端工程师的前后端交互指南物联网世界的 更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfr...

    pingan8787 评论0 收藏0

  • React学习笔记—组件组合

    摘要：说的通俗点如果组件出现在了组件的方法中，那么组件就是所有者。所有者和被所有者关系是针对组件的，父子关系是针对结构的。子调节调节发生在更新的过程中。带有状态的子节点对大部分组件来说，问题不大。应该加在组件上，而不是标签上。 关注分离 我们在编程的时候碰到相同的功能，可以通过抽出公共方法或者类来实现复用。当我们构建新的组件的时候，尽量保持我们的组件同业务逻辑分离，将相同功能的组件抽出一个...

    xiaodao 评论0 收藏0

  • React state与props学习笔记

    摘要：组件的状态与属性组件本质上是状态机，输入确定，输出一定确定。这是在事件处理函数中和请求回调函数中触发更新的主要方法。 组件的状态与属性 组件本质上是状态机，输入确定，输出一定确定。组件把状态与结果一一对应起来，组件中有state与prop（状态与属性）。 属性(props)是由父组件传递给子组件的； 状态(state)是子组件内部维护的数据，当状态发生变化的同时，组件也会进行更新。当...

    lk20150415 评论0 收藏0

  • React学习笔记—Why React?

    摘要：官方说法注本人英语二十六级是和用来创建用户界面的库。很多人将认为是中的。怎么说呢现在的自己就是个跟风狗啊，什么流行先学习了再说，再看看能不能应用在具体项目上。暂时先停下的学习，坐等。不过学习的脚步还是跟不上潮流的发展速度啊。 Why React? 官方说法 注：本人英语二十六级 React是Facebook和Instagram用来创建用户界面的JavaScript库。很多...

    余学文 评论0 收藏0

发表评论

登陆后可评论

0条评论

spacewander

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<