• react学习笔记


    我们在使用react的时候,尽量不要操作dom节点,通过状态的改变来渲染这样是最合理的。

    这里我记录了react使用ajax的例子进行分析

    React.createClass:

      创建React组件对应的类,描述你将要创建组件的各种行为,其中只有当组件被渲染时需要输出的内容的render接口是必须实现的,其他都是可选

    getInitialState:
      设置初始的state
    componentDidMount:
      第一次渲染后调用,只在客户端
    setState:
      设置状态
    componentWillUnmount:
      在组件从 DOM 中移除的时候立刻被调用
    abort():
      会中止一个已经发出的请求
    ReactDOM.render:
      将模板转为 HTML 语言,并插入指定的 DOM 节点
     
    <body>
        <div id="example"></div>
        <script type="text/babel">
          var UserGist = React.createClass({
            getInitialState: function() {
              return {
                username: '',
                lastGistUrl: ''
              };
            },
    
            componentDidMount: function() {
              this.serverRequest = $.get(this.props.source, function (result) {
                var lastGist = result[0];
                this.setState({
                  username: lastGist.owner.login,
                  lastGistUrl: lastGist.html_url
                });
              }.bind(this));
            },
    
            componentWillUnmount: function() {
              this.serverRequest.abort();
            },
    
            render: function() {
              return (
                <div>
                  {this.state.username} 用户最新的 Gist 共享地址:
                  <a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
                </div>
              );
            }
          });
    
          ReactDOM.render(
            <UserGist source="https://api.github.com/users/octocat/gists" />,
            document.getElementById('example')
          );
        </script>
      </body>
  • 相关阅读:
    VS.NET 2005 常用的快捷键
    路径,文件,目录,I/O常见操作汇总
    c#中cookies的存取操作
    ASP.NET AJAX入门系列(1):概述
    RS2008中控件ID冲突问题
    [书名]各种计算机语言的经典书籍
    终于把课件做好了~~
    还是两个数的交换问题
    自制简易图片尺寸调整工具[源]
    被点名了~~~[游戏]
  • 原文地址:https://www.cnblogs.com/cczlovexw/p/7428696.html
Copyright © 2020-2023  润新知