RN博客学习

2017-10-30  本文已影响14人  小白猿

应公司的业务要求，现在又要转学RN，比几个月前的安卓还要懵逼，虽然还是有点猝不及防，但是心里略能接受，但是目前学习没有头绪，前端大神给推荐说看看阮一峰老师的博客，磕磕绊绊的弄了一周，现在刚看懂一点代码
本文是对阮一峰老师的React 入门实例教程学习的笔记

散记一些概念或者用法

  • 数组用法

JSX语法遇到数组，就会将数据内容展开，然后插入后引用的地方
eg0.

var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

执行结果为

<div id="example">
  <div data-reactroot="">
    <h1>Hello world!</h1>
    <h2>React is awesome</h2>
  </div>
</div>
  • 组件类
<body>
    <div id="example"></div>
    <script type="text/babel">
      var HelloMessage = React.createClass({
        render: function() {
          return <h1>Hello {this.props.name}</h1>;
        }
      });

      ReactDOM.render(
        <HelloMessage name="John" />,
        document.getElementById('example')
      );
    </script>
  </body>

运行结果

<div id="example">
  <h1 data-reactroot="">
    <!-- react-text: 2 -->
    Hello 
    <!-- /react-text -->
    <!-- react-text: 3 -->
    John
    <!-- /react-text -->
  </h1>
</div>
  • this.props.children

eg2.

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')
);

运行结果为

1.hello
2.world

对代码略作修改
在<NotesList>增加一个字元素

<p>
  <span>!</span>
</p>

<!--即代码为--> 
ReactDOM.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
    <p>
        <span>!</span>
    </p>
  </NotesList>,
  document.getElementById('example')
);

通过查看页面代码


页面代码

通过运行，发现仅仅对 p 便签这个儿子元素进行了改变，对p的子元素并没有进行操作

  • PropTypes

可以理解为一个属性类型校验，因为组件类属性可以为任意值（字符串、对象、函数等等），所以在特定的使用场景需要对属性的类型进行规定

<script type="text/babel">
     var data = 123;
     var MyTitle = React.createClass({
       propTypes: {
         title: React.PropTypes.string.isRequired,
       },
       render: function() {
         return <h1> {this.props.title} </h1>;
       }
     });
     ReactDOM.render(
       <MyTitle title={data} />,
       document.getElementById('example')
     );
      </script>

本例中属性要求类型是字符串，但是赋值的时候是一个数值类型，运行的时候会有一个警告
Warning: Failed propType: Invalid prop 'title' of type 'number' supplied to 'MyTitle', expected 'string'.
更多PropTypes设置参考官方文档

设置属性的默认值，可用getDefaultProps

var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },

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

ReactDOM.render(
  <MyTitle />,
  document.body
);

程序执行完会显示 Hello World'

  • DOM & virtual DOM

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。
根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。
当 virtual DOM 需要调用真实的DOM的时候，需要用到ref关键字

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')
);
  • this.state

通过state 属性实现当组件变化以后，状态随之改变的功能

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')
);
上一篇 下一篇

猜你喜欢

热点阅读