React State

1.getInitialState:设置初始State,返回Object

2.this.setState():改变State

3.都在creatClass内创建类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,
    minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script src="lib/react.js"></script>
    <script src="lib/react-dom.js"></script>
    <script src="lib/browser.min.js"></script>
    <title></title>
</head>
<body>
<div id="example"></div>

</body>
<script type="text/babel">
    var LikeButton = React.createClass({
        getInitialState: function() {
            return {liked: false};
        },
        handleClick: function(event) {
            this.setState({liked: !this.state.liked});
        },
        render: function() {
            var text = this.state.liked ? ‘喜欢‘ : ‘不喜欢‘;
            return (
                    <p onClick={this.handleClick}>
                    你<b>{text}</b>我。点我切换状态。
                </p>
            );
        }
    });

    ReactDOM.render(
            <LikeButton />,
            document.getElementById(‘example‘)
    );
</script>
</html>

  

时间: 2024-11-03 05:37:57

React State的相关文章

React State(状态)

React State(状态) React 把组件看成是一个状态机(State Machines).通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致. React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM). 以下实例中创建了 LikeButton 组件,getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取.当用户点击组件,导致状态变化,this.setS

react常见组件问题Can&#39;t perform a React state update on an unmounted component

在些react组件的时候,会有这个警告 Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method” 这是因为在写一

react项目Bug:组件销毁清除监听(Can&#39;t perform a React state update on an unmounted component.)

最近一直在做react项目,发现一个bug,困扰了我两天. Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount metho

React State学习

Last time we looked at how to use properties, to affect the initial rendering of components. Today we’ll take a look at how to use state, how it differs from properties and some things you should consider when using state. 上一次我们讨论了如何使用properties来影响一个

React——State

状态管理机制==?vuex? 就教程来看,还是不一样的,相当于vue实例里的data初始化,methods事件处理 var LikeButton = React.createClass({ getInitialState: function() { //state return {liked: false}; }, handleClick: function(event) { this.setState({liked: !this.state.liked}); }, render: functi

react篇章-React State(状态)-将生命周期方法添加到类中

将生命周期方法添加到类中 在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要. 每当 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 React 中被称为挂载. 同样,每当 Clock 生成的这个 DOM 被移除的时候,我们也会想要清除定时器,这在 React 中被称为卸载. 我们可以在组件类上声明特殊的方法,当组件挂载或卸载时,来运行一些代码: <!DOCTYPE html> <html> <head> <meta cha

react篇章-React State(状态)-数据自顶向下流动

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src=

react篇章-React State(状态)-组件都是真正隔离的

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React 实例</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src=&quo

React state和props使用场景

一个组件的显示状态可以由内部状态state.外部参数props所决定. 上面的这句话价值100万美元. 啥叫内部和外部呢! 从我们组织程序的角度,入参是state,从后台返回的数据是外部参数时props.所以说state是万能的,可以看做是外部的也是内部的. 但是props 一定是外部的,如何进入内部呢,成为state呢,回调函数. props: 1.props 是从外部传进组件的参数,主要是父组件向子组件传递数据. 2.props 对于使用它的组件来说是只读的.要想修改props,必须通过父组