React初识

于 2017-02-20 09:15:43 发布
阅读量298 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： React 文章标签： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sunxiaofre/article/details/56004433

一、基础概念

这里写图片描述

  1. body中的script的type属性为text/babel，因为React独有的JSX语法与js不兼容，凡是使用JSX的地方，都要加上type="text/babel"。
  2. 首先必须加载三个库：react.js（React的核心库），react-dom.js（提供与DOM相关的功能），browser.js（将JSX语法转为js语法）。

二、ReactDOM.render()

  1. ReactDOM.render()是React的最基本方法，用于将模版专为HTML语言，并插入指定的DOM节点。
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

三、JSX语法

  1. JSX对的基本语法规则：遇到HTML标签（以 < 开头），就用HTML规则解析；遇到代码块（以 { 开头），就用js规则解析。
  2. JSX允许直接在模版插入js变量。如果这个变量是一个数组，则会展开这个数组的所有成员。
  3. 代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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="example1"></div>
<script type="text/babel">
    var names = ['Mike', 'Alice', 'Serena'];
    ReactDOM.render(
        <div>
            {
                names.map(function (names) {
                    return <div>Welcome,{names}!</div>
                })
            }
        </div>,
        document.getElementById('example')
    );
</script>

<div id="example2"></div>
<script type="text/babel">
    var fruits = [
        <h1>Fruits</h1>,
        <h2>apple</h2>,
        <h2>mango</h2>
    ];
    ReactDOM.render(
        <div>
            {
                fruits.map(function (fruits) {
                    return  <div>{fruits}</div>
                })
            }
        </div>,
        document.getElementById('example2')
    );
</script>
</body>
</html>

这里写图片描述

四、组件

  1. React允许将代码封装成组件（component），然后像插入普通HTML标签一样，在网页中插入这个组建。React.createClass方法就用于生成一个组件类。
  2. 所有的组件类必须有自己的render方法，用于输出组件。
  3. 注意：组件类的第一个字母必须大写，否则会报错。另外，组件类只能抱憾一个顶层标签，否则会报错。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件 component</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="exam"></div>
<script type="text/babel">
    var WelMes = React.createClass({
        render:function () {
            return <h1>Welcome {this.props.name}</h1>;
        }
    });
     ReactDOM.render(
       <WelMes name="Sunny"/>,
         document.getElementById('exam')
     );
</script>
</body>
</html>

注意！！！

  1. 上述代码中，WelMes就是一个组件类。模版插入<WelMes />时，会自动生成WelMes的一个实例。所有组件类都必须有自己的render方法，用于输出组件。
  2. 组件类的第一个字母必须大写，否则会报错。另外，组件类只能抱憾一个顶层标签，否则会报错。

  3. var WelMes = React.createClass({
    render:function () {
    return <h1>Welcome {this.props.name}</h1><p>to China</p>;
    }
    });

    上述代码会报错，因为WelMes组件包含了两个顶层标签：h1和p。

    1. 组建的用法和原生的HTML标签完全一致，可以任意加入属性，例如<WelMes name="Sunny"/>，就为WelMes组件加入了一个name属性，值为Sunny。组件的属性可以在组件类的this.props对象上获取，比如name属性就可以通过this.props.name读取。

    2. 添加组件属性还需注意：class属性需要写成 classname， for属性需要写成 htmlFor。因为class 和 for是js的保留字。

五、this.props.children

  1. this.props对象的属性与组件的属性一一对应，除了this.props.children属性。他表示组件的所有子节点。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this.props.children</title>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
<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>Welcome</span>
          <span>World</span>
      </NotesList>,
        document.body
    );
</script>
</body>
</html>

这里写图片描述

上述代码中NotesList组件有两个span子节点，它们都可以通过this.props.children读取。

  1. 注意：this.props.children的值有三种可能：undefined，object，array。若当前组件没有子节点，他就是undefined；若有一个子节点，他就是object；若有多个子节点，数据类型就是array。故在处理this.props.children时要格外小心。
  2. React提供一个工具方法React.children来处理 this.props.children。我们可以用React.Children.map来遍历子节点，而不必担心 this.props.children的数据类型时undefined还是object

六、PropTypes

  1. 组建的属性可以接受任意类型的值（字符串，对象，函数等）。有时需要一种机制，验证别人使用组件时所提供的参数是否符合要求。组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PropTypes practice</title>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
<script type="text/babel">
    var MyTitle = React.createClass({
        propTypes: {
            title: React.PropTypes.string.isRequired,
        },
        render: function () {
            return <h1>{this.props.title}</h1>;
        }
    });
    var data = 25;
    ReactDOM.render(
        <MyTitle title={data} />,
        document.body
    );
</script>
</body>
</html>

这里写图片描述

  1. 上面的MyTitle组件有个title属性。PropTypes告诉React这个属性是必须的，而且它的值必须是字符串。若设置title属性的值是一个数值，则title属性就无法通过验证，控制台显示上述错误信息。

  2. 可以用getDefaultProps方法设置组件属性的默认值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可以用`getDefaultProps`方法设置组件属性的默认值</title>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
<script type="text/babel">
    var MyTitle = React.createClass({
        getDefaultProps: function () {
            return {
                title: 123
            };
        },
        render: function () {
            return <h1>{this.props.title}</h1>;
        }
    });

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

这里写图片描述

七、获取真实的DOM节点

  1. 待学。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值