RN博客学习

作者: 小白猿 | 来源:发表于2017-10-30 09:54 被阅读14次

RN博客学习
React-Native学习（iOS程序员笔记）
java算法之数组（栈的编写）
开启 RN 学习之旅
RN学习网址（持续更新）
RN学前考虑、成果展示
学习网址
2022-05-27
react-native Mac-iOS 开发环境搭建
iOS调RN方法，bridge爆错

应公司的业务要求，现在又要转学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>

组件类

React 允许将代码封装成组件进行使用，然后可以像HTML标签一样插入
通过React.createClass生成组件类
组件类必须要有自己的render方法，用于输出组件
首字母必须大写
引用格式为`<组件名属性A="xx" 属性B="yy"... />
组件类的实现必须包含一个顶层标签
eg1.

<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的子元素并没有进行操作

注意事项
- 使用 this.props.children时可能返回三种结果
  - 当前没有子节点，返回undefined
  - 当前只有一个节点，返回object
  - 当前有多个节点，返回一个array
- 由于直接使用可能会出问题，React 提供了React.Children.map来遍历节点，用法可以参考eg2，另外在官网提供了React.Children的更多用法

PropTypes

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

eg3.

<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

eg4.

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关键字

eg5.

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

上面代码中，组件 MyComponent的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。
注意，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName] 属性。
React 组件支持很多事件，除了 Click 事件以外，还有KeyDown、Copy、Scroll 等，完整的事件清单请查看官方文档。

this.state

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

eg6

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

初始化属性状态：在本例中定义了一个like状态，并初始化为false
this.setState 用于修改状态,当其每次修改以后，自动调用 this.render 方法，再次渲染组件，修改状态格式如下：
this.setState({状态key: 状态value})
区别：
- this.props 表示那些一旦定义，就不再改变的特性，
- this.state是会随着用户互动而产生变化的特性。
运行结果