react学习笔记2--练习Demos

准备工作

# 0、react核心库
  <script src="../build/react.js"></script>
# 将JSX 语法转为 JavaScript
  <script src="../build/JSXTransformer.js"></script>

1、react基本语法

<script type="text/jsx">
  React.render(
    <h1>react渲染一条内容</h1>,
    document.getElementById('example')
  );
</script>

2、一个简单的组件

• React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件；
• 【注意，组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。】

<script type="text/jsx">
  var HelloMessage = React.createClass({
    render: function() {
      return (
        <p>我擦，这个是组件</p>
      );
    }
  });

  React.render(
    <HelloMessage />,
    document.getElementById('example')
  );
</script>

3、组件的生命状态

• 组件的生命周期【挂载、更新、移除】
• getInitialState:是一个比较重要的方法，在组件挂载之前调用一次，可以用来定义初始化的数据，然后在后面调用
• getDefaultProps:
  • 在组件类创建的时候调用一次，然后返回值被缓存下来。如果父组件没有指定 props 中的某个键，则此处返回的对象中的相应属性将会合并到 this.props （使用 in 检测属性）。
    
    *【该方法在任何实例创建之前调用】，因此不能依赖于 this.props。另外，getDefaultProps() 返回的任何复杂对象将会在实例间共享，而不是每个实例拥有一份拷贝。
• componentWillMount【挂载】：
  • 服务器端和客户端都只调用一次，在初始化渲染执行之前立刻调用。如果在这个方法内调用 setState，render() 将会感知到更新后的 state，将会执行仅一次，尽管 state 改变了。
• componentDidMount【挂载】：
  • 在初始化渲染执行之后立刻调用一次，仅客户端有效（服务器端不会调用）。在生命周期中的这个时间点，组件拥有一个 DOM 展现，你可以通过 this.findDOMNode() 来获取相应 DOM 节点。
  • 如果想和其它 JavaScript 框架集成，使用 setTimeout 或者 setInterval 来设置定时器，或者发送 AJAX 请求，可以在该方法中执行这些操作。

<script type="text/jsx">
  var HelloMessage = React.createClass({
    getInitialState:function(){
      // this.state={};
      console.log("在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。");
      return {data : "haha"};
    },
    getDefaultProps:function(){console.log("")},
    componentWillMount:function(){console.log(1)},
    componentDidMount:function(){console.log(2)},
    // [更新的时候调用]
    componentWillReceiveProps:function(){console.log(3)},
    shouldComponentUpdate:function(){console.log(4)},
    componentWillUpdate:function(){console.log(5)},
    componentDidUpdate:function(){console.log(6)},
    // 移除的时候调用
    componentWillUnmount:function(){console.log(7)},

    render: function() {
      return (
        <p>我擦，这个是组件{this.state.data}</p>
      );
    }
  });

  React.render(
    <HelloMessage />,
    document.getElementById('example')
  );
</script>

4、事件处理

• react的事件支持有点像是传统的事件绑定方法，通过onClick等绑定事件;
  
  数据的变化可以通过state的变量变【用this.setState方法】，也可以通过全局变量变

<script type="text/jsx">
  var i=0;
  var HelloMessage = React.createClass({
    getInitialState:function(){
      console.log("在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。");
      return {data : "haha"};
    },
    handClick:function(){
      ++i;
      this.setState({data : "点击了"+i})
    },
    render: function() {
      return (
        <p onClick={this.handClick}>我擦，这个是组件,可点击-----{this.state.data}</p>
      );
    }
  });

  React.render(
    <HelloMessage />,
    document.getElementById('example')
  );
</script>

5、DOM操作

• React.findDOMNode(component)获取到组件中真实的DOM;
• react可以允许我们通过 ref 来定位一个组件。具体的做法是：先给一个组件设置一个 ref=‘xxx’ 的属性，注意这个ref必须是全局唯一的。<input ref='myTextInput' />然后就可以通过 this.refs.myTextInput 来访问这个组件。【不过，这里拿到的只是虚拟DOM，而不是真实的DOM。】
• 获取DOM主要是为了用第三方的插件来实现我们的功能，如jQuery。

<script type="text/jsx">
  var MyComponent = React.createClass({
    handleClick: function() {
      // Explicitly focus the text input using the raw DOM API.
      React.findDOMNode(this.refs.myTextInput).focus();
    },
    render: function() {
      // The ref attribute adds a reference to the component to
      // this.refs when the component is mounted.
      return (
        <div>
          <input type="text" ref="myTextInput" />
          <input
            type="button"
            value="Focus the text input"
            onClick={this.handleClick}
          />
        </div>
      );
    }
  });

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

6、组件组合使用

• 复合组件必须有一个，而且只能有一个父节点;如Box组件
• 复合组件添加方法如

<script type="text/jsx">
  var ComDemo1=React.createClass({
    render: function() {
      return (<p>哈哈哈，组件</p> );
    }
  });

  var ComDemo2=React.createClass({
    render: function() {
      return (<p>哈哈哈，组件2</p> );
    }
  });

  var Box=React.createClass({
    render: function() {
      return (
        <div>
          <ComDemo1 /><ComDemo2 />
        </div>
      );
    }
  });

  React.render(
    <Box />,
    document.getElementById('example')
  );
</script>

7、组件之间的数据传递

• 组件之间之间的组合使用的时候，this.state和this.props是很重要的一些东西
• 这个demo的数据的交换通过父亲Box组件来实现
• comment_txt，data都是用来绑定子节点的一些方法
• 类似input这种非成对标签，需要"/"结尾如"<input type="text" ref="input_txt" />"
• this.refs用来绑定获取真实的dom节点
• this.props.data.map遍历父元素传过来的数据
• this.setState({list:this.state.list})重新设计数据，会自动刷新

<script type="text/jsx">
  var BoxInput=React.createClass({
    btn_sub:function(){
      var txts=this.refs.input_txt.getDOMNode().value.trim();
      this.props.comment_txt(txts);
      this.refs.input_txt.getDOMNode().value = '';
    },
    render: function() {
      return (
        <div className="inp">
           <input type="text" ref="input_txt" />
           <input type="button" value="添加" onClick={this.btn_sub} />
        </div>
      );
    }
  });

  var BoxShow=React.createClass({
    render: function() {
      var com_lsit=this.props.data.map(function ( comment,index ){
            return(<li>{index+1}、{comment}</li> )
          });
      return (
        <ul> {com_lsit} </ul>
      );
    }
  });

  var Box=React.createClass({
    getInitialState:function(){
      return{
        list:["第一","XD"]
      }
    },
    surper_comment_txt:function(comment){
      // console.log("传过来的东西："+comment);
      this.state.list.push(comment);
      console.log(this.state.list);
      this.setState({list:this.state.list})
    },
    render: function() {
      // comment_txt，data都是用来绑定子节点的一些方法
      return (
        <div>
          <BoxInput comment_txt={this.surper_comment_txt}  />
          <BoxShow data={this.state.list} />
        </div>
      );
    }
  });

  React.render(
    <Box />,
    document.getElementById('example')
  );
</script>

8、Mixins

• mixins是用来做方法复用的，
• 使用方法：mixins:[SetIntervalMixin],
• note：使用 ES6 class 定义的组件已经不支持 mixin 了，因为使用 mixin 的场景都可以用组合组件这种模式来做到

<script type="text/jsx">
  var SetIntervalMixin = {
    fn1:function(){console.log("我是方法1") },
    fn2:function(){console.log("我是方法2") },
    fn3:function(){console.log("我是方法3") }
  };

  var ComDemo1=React.createClass({
    mixins:[SetIntervalMixin],
    getInitialState:function(){
      this.fn1();
      return{};
    },
    render: function() {
      return (<p>哈哈哈，组件</p> );
    }
  });

  var ComDemo2=React.createClass({
    mixins:[SetIntervalMixin],
    getInitialState:function(){
      this.fn2();
      return{};
    },
    render: function() {
      return (<p>哈哈哈，组件2</p> );
    }
  });

  var ComDemo0=React.createClass({
    render: function() {
      return (
        <div><ComDemo2 /><ComDemo1 /></div>
      );
    }
  });
  React.render(
      <ComDemo0 />,
      document.getElementById('example')
  );
</script>

9、其他

• Flux等还需要了解，练习
• 服务端渲染需要了解
• 动画等也没有了解

参考文章

• 参考demo
• 介紹 | React 入门教程
• React 中文版
• 小俞的学习笔记
• react与Jquery比较