react学习笔记2

1.build文件介绍

（1）react.js 是react的核心库

（2）react-dom.js 提供与DOM相关功能

（3）browser.js 是将JSX语法转为javascript语法

2.组件的继续学习

　　注意：组件的第一个字母必须大写，否则会报错。组件的用法和html标签完全一致，可以任意加入属性。组件的属性，可以通过 this.props 对象上获取。

3.this.props.children

　　this.props.children 有三种可能：

　　　　　　　　　　　　 a.当前组件没有字节点，返回undefined ；

　　　　　　　　　　　　 b.如果有一个字节点，数据类型是object ；

　　　　　　　　　　　　 c.数据类型是array

　　（1）代码预览

　　（2）游览器里效果

　　（3）源码　　

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>

    <script type="text/babel">

      var NotesList = React.createClass({
      render: function() {
        return (
          <ol>
          {
            React.Children.map(this.props.children, function (child) {
              return <li>{child}</li>;
            })
          }
          </ol>
        );
      },
      });

      ReactDOM.render(
        <NotesList>
          <span>hello</span>
          <span>world</span>
        </NotesList>,
        document.getElementById('example')
      );

    </script>
  </body>
</html>

4.PropTypes

　　组件类的 PropType 属性，就是用来验证组件实例的属性是否符合要求。

　　(1)代码预览

　　(2)游览器里效果

　　（3）源码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>

    <script type="text/babel">

    var MyTitle = React.createClass({
      propTypes: {
        title: React.PropTypes.string.isRequired,
      },

      render: function() {
         return <h1> {this.props.title} </h1>;
       }
    });

    var data = 123;

    ReactDOM.render(
      <MyTitle title={data} />,
      document.body
    );


    </script>
  </body>
</html>

5.获取真实的dom节点

　　组件并不是真实的dom节点，而是存在于内存中的一种数据结构，叫做virtual dom。只有插入文档中才会变成真实的dom 。根据react的设计，所有的dom的变动，都现在虚拟的dom上发生，然后再将实际发生变动的部分，反映在真实的dom上，这种算法叫做dom diff，它可以极大提高网页的性能。

　　（1）代码预览

　　（2）游览器效果如下：

　　（3）源码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>

    <script type="text/babel">

    var MyComponent = React.createClass({
      handleClick: function() {
        this.refs.myTextInput.focus();
      },
      render: function() {
        return (
          <div>
            <input type="text" ref="myTextInput" />
            <input type="button" value="Focus the text input" onClick={this.handleClick} />
          </div>
        );
      }
    });

    ReactDOM.render(
      <MyComponent />,
      document.getElementById('example')
    );


    </script>
  </body>
</html>

6.this.state

　　this.state 和 this.props 都是用来描述组件的特性。this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是随着用户而产生的热性。

　　（1）代码预览

　　（2）游览器里效果（点击的时候会切换）

　　(3)源码

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <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 ? 'like' : 'haven\'t liked';
          return (
            <p onClick={this.handleClick}>
              You {text} this. Click to toggle.
            </p>
          );
        }
      });

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

7.表单

　　(1)代码预览

　　（2）在游览器中的效果（p标签里面的内容会随着input里面的内容变化）

　　（3）源码

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var Input = React.createClass({
        getInitialState : function(){
          return {value:'hello'};
        },
        handleChange : function(event){
          this.setState({value:event.target.value});
        },
        render : function(){
          var value = this.state.value;
          return(
            <div>
              <input type="text" value={value} onChange={this.handleChange} />
              <p>{value}</p>
            </div>
          );
        },
      });

      ReactDOM.render(<Input/>,document.getElementById('example'))
    </script>
  </body>
</html>

8.组件的生命周期

　　组件的生命周期分成三个状态：

　　　　1. mounting : 已经插入真实dom

　　　　2.updating : 正在被重新渲染

　　　　3.unmounting : 已移除真实dom

　　react为每个状态都提供了两种处理函数，will 函数在进入状态前期调用，did 函数在进入状态之后调用，三种状态共计五种处理函数

　　　　1. componentWillMount()

　　　　2. componentDidMount()

　　　　3. componentWillUpdate(object nextProps,object nextState)

　　　　4. componentDidUpdate(object prevProps,object preState)

　　　　5. componentWillUnmount()

　　此外，react还提供特殊状态的处理函数：

　　　　1. componentWillReceiveProps(object nextProps) 已加载组件到新的参数时调用

　　　　2. shouldComponentUpdate(object next Props,object nextState) 组件判断是否重新渲染时调用

　　例子：（helloworld的透明度随时间改变）

　　（1）代码预览

　　（2）游览器里的效果

　　（3）源码

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var Hello = React.createClass({
      getInitialState: function () {
        return {
          opacity: 1.0
        };
      },

      componentDidMount: function () {
        this.timer = setInterval(function () {
          var opacity = this.state.opacity;
          opacity -= .05;
          if (opacity < 0.1) {
            opacity = 1.0;
          }
          this.setState({
            opacity: opacity
          });
        }.bind(this), 100);
      },

      render: function () {
        return (
          <div style={{opacity: this.state.opacity}}>
            Hello {this.props.name}
          </div>
        );
      }
    });

    ReactDOM.render(
      <Hello name="world"/>,
      document.body
    );
    </script>
  </body>
</html>

9.ajax

　　组件的数据来源，通常是通过ajax请求服务器获取可以使用componentDidMount方法设置ajax请求，等到请求成功，再用this.setState的方法重新渲染UI。

　　(1)代码预览

　　（2）游览器效果

　　（3）源码

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
    <script src="../build/jquery.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">


      var RepoList = React.createClass({
      getInitialState: function() {
        return { loading: true, error: null, data: null};
      },

      componentDidMount() {
        this.props.promise.then(
          value => this.setState({loading: false, data: value}),
          error => this.setState({loading: false, error: error}));
      },

      render: function() {
        if (this.state.loading) {
          return <span>Loading...</span>;
        }
        else if (this.state.error !== null) {
          return <span>Error: {this.state.error.message}</span>;
        }
        else {
          var repos = this.state.data.items;
          var repoList = repos.map(function (repo) {
            return (
              <li>
                <a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}
              </li>
            );
          });
          return (
            <main>
              <h1>Most Popular JavaScript Projects in Github</h1>
              <ol>{repoList}</ol>
            </main>
          );
        }
      }
    });


    ReactDOM.render(
      <RepoList
        promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}
      />,
      document.body
    );
    </script>
  </body>
</html>

10.最后总结下几个需要注意的地方：

　　1.react主要的概念是状态机＋组件

　　2.组件的首字母必须大写

　　3.组件使用的过程中／不要漏掉，<conponentName />

posted @ 2016-02-22 17:10 Cynthia娆墨旧染阅读(280) 评论(0) 编辑收藏举报

刷新页面返回顶部

Cynthia娆墨旧染

Don’t Repeat Yourself.

react学习笔记2

公告