react_01

2019-11-09

字数统计: 1.2k字 | 阅读时长≈ 5分

本文主要看阮一峰老师的博客：react入门示例教程

亲测教程中的部分功能在react16后失效（除了python还有不向下兼容的….），欢迎交流，希望大家少走些弯路。

自己学习过程中做的react实例

一、react网页源码

<!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">
      // ** Our code goes here! **
    </script>
  </body>
</html>

1️⃣body可加入script标签，但type属性为text/babel，因为react是JSX，html和css都可以写在js里。

2️⃣用了三个库：react.js、react-dom.js、Browser.js，react.js核心库，react-dom提供DOM(文档对象类型Document Object Moodel)相关，Browser是把JSX转为JS（但消耗时间）。

1	$ babel src --out-dir build

把src目录里的js进行转码后放在build目录。

二、ReactDOM.render()

把模版转为HTML，插入DOM结点。（关于DOM可先看Java Script DOM编程艺术，讲的很基础）

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

ReactDOM.render(参数一, 参数二)
参数一：被渲染的标签
参数二：被插入的父元素

三、JSX语法

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
  <div>
  {
    names.map(function (name) {    \\ map函数：遍历数组 ，此处会显示三行
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('example')
);

在参数一中，{}中可以键入javascript代码，可以用来遍历数组，对象等；在其中可以使用return来返回标签。

JSX 的基本语法规则：

遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；

遇到代码块（以 { 开头），就用 JavaScript 规则解析。

数组直接写在{}中就能遍历：

var arr = [
<h1>Hello world</h1>,
<h2>React is awesome</h2>,
];


ReactDOM.render(
	<div>{arr}</div>,
	document.getElementById('example') \\找到id为example的元素节点
);

四、组件

React允许用React.createClass方法自己封装组件，然后像插入普通HTML元素节点一样在网页中插入。

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

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

此时，HelloMessage就是一个组件类。

var HelloMessage = React.createClass({
  render: function() {
    return <h1>
      Hello {this.props.name}
    </h1><p>
      some text
    </p>;
  }
});

上述代码是错的，因为return了两个元素节点h1和p

组件类的第一个字母必须大写

组件类只能包含一个顶层标签

组件类必须有 / 结尾

所有组件类都必须有自己的 render 方法，用于输出组件

五、this.props.children

this.props.children：表示组件的所有子节点。（关于props）

把NotesList下的所有子节点渲染到 ol li中

<div id="example"></div>
  <script type="text/babel">
    class NotesList extends React.Component {
        render() {
          return (
            <ol>     //有序序列表
              {
                React.Children.map
                  (this.props.children , function (child) {
                  return <li>{child}</li>;
                  })
              }
            </ol>
          );
        }
      }
    
    // this.props.children 表示组件上的子节点
     
      ReactDOM.render(
        <NotesList>
          <span>45645</span>
          <span>hello</span>
          <span>world</span>
        </NotesList>,
        document.getElementById('example')
      );
    </script>

上面的NoteList组件有三个span子节点

this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。

React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。更多的 React.Children 的方法，请参考官方文档。

6、PropTypes

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

指定组件中的属性类型

如下代码验证组件实例属性是否符合要求

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

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

如下代码设置组件属性的默认值

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

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

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

React版本16以后不再支持createclass以及其内部的getDefaultProps！要改用下面的.component以及defaultProps方法！

<div id="example"></div>
 <script type="text/babel">
   var data = 123;
     class MyTitle extends React.Component {
       static propTypes = {
         title: PropTypes.string.isRequired,   // title的文本节点必须是字符串 
       }，
       render() {
         return <h1> {this.props.title} </h1>;
       }
     }

     ReactDOM.render(
       <MyTitle title={data} />
	return <h1>Hello {this.props.name}</h1>,
       document.getElementById('example')
     );
   </script>

在浏览器中按F12看到开发者工具里因为默认title值是数字而报错。

加油。

本文作者： Raphael_Li
本文链接： https://lifei-2019.github.io/react-01/
版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！