React初识

来源：互联网发布：电玩游戏java实战编辑：程序博客网时间：2024/06/05 10:50

一、基础概念

这里写图片描述

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

二、ReactDOM.render()

ReactDOM.render()是React的最基本方法，用于将模版专为HTML语言，并插入指定的DOM节点。

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

三、JSX语法

JSX对的基本语法规则：遇到HTML标签（以 < 开头），就用HTML规则解析；遇到代码块（以 { 开头），就用js规则解析。
JSX允许直接在模版插入js变量。如果这个变量是一个数组，则会展开这个数组的所有成员。
代码示例：

<!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>

这里写图片描述

四、组件

React允许将代码封装成组件（component），然后像插入普通HTML标签一样，在网页中插入这个组建。React.createClass方法就用于生成一个组件类。
所有的组件类必须有自己的render方法，用于输出组件。
注意：组件类的第一个字母必须大写，否则会报错。另外，组件类只能抱憾一个顶层标签，否则会报错。

<!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>

注意！！！

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

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读取。

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

六、PropTypes

组建的属性可以接受任意类型的值（字符串，对象，函数等）。有时需要一种机制，验证别人使用组件时所提供的参数是否符合要求。组件类的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>

这里写图片描述

上面的MyTitle组件有个title属性。PropTypes告诉React这个属性是必须的，而且它的值必须是字符串。若设置title属性的值是一个数值，则title属性就无法通过验证，控制台显示上述错误信息。
可以用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节点

待学。

0 0