React，动态交互式用户界面

最新推荐文章于 2023-09-21 15:18:01 发布

原创最新推荐文章于 2023-09-21 15:18:01 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了React如何创建动态交互式用户界面，重点讨论了自动绑定和事件代理技术，以及通过调用setState方法更新组件状态的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态交互式用户界面

在幕后，React 做了一些操作来让代码高效运行且易于理解:自动绑定（Autobinding）和事件代理（Event Delegation）
常用的通知 React 数据变化的方法是调用 setState(data, callback)。这个方法会合并（merge） data 到 this.state

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>H5-hello-react</title>

    <!-- 
     <script src="http://fb.me/react-{{site.react_version}}.js"></script>
    <script src="http://fb.me/JSXTransformer-{{site.react_version}}.js"></script>

     -->
</head>
<body>


<div id="demo"></div>
<script type="text/jsx">

// 动态交互式用户界面
// 在幕后，React 做了一些操作来让代码高效运行且易于理解:自动绑定（Autobinding）和事件代理（Event Delegation）
// 常用的通知 React 数据变化的方法是调用 setState(data, callback)。这个方法会合并（merge） data 到 this.state

    // var LikeButton  = React.createClass({
    //  demo:function(){},
    // })
    // var LikeButton = <LikeButton ></LikeButton>;
    // React.render(LikeButton,document.getElementById('demo'))

    var LikeButton  = React.createClass({
        //  demo:function(){},
        getInitialState:function(){
            return {liked:false}
        },
        handleClick:function(){
            this.setState({liked: !this.state.liked});
        },
        render:function(){
            var txt = this.state.liked?'liked':'haven\'t liked';
            return(
                <p onclick={this.handleClick}>
                    You {txt} this. Click to toggle.
                </p>
            );
        },

    });
    var LikeButtonDom = <LikeButton ></LikeButton>;
    React.render(LikeButtonDom,document.getElementById('demo'))

</script>

</body>
</html>