React入门实例

Tags:React

React介绍

JSX语法

组件

props

state

React介绍

React 一个由Facebook开源的构建用户界面的Javascript库，相当于MVC中的View层
React特点：

声明式设计 −React采用声明范式，可以轻松描述应用。
高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
灵活 −React可以与已知的库或框架很好地配合。
JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

React网页模板：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
    <!-- react核心库 -->
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <!-- react 提供与DOM相关功能 -->
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <!-- 将ES6预发转换为ES5语法，将JSX语法转换为Javascript语法，较好性能，一般在服务端完成此操作 -->
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <!-- 注意点：type属性值要设置为text/babel -->
    <script type="text/babel">

    </script>
</body>
</html>

JSX语法

JSX是Javascript的拓展语法糖，在React中替代Javascript

JSX特点：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
类型安全，在编译过程中就能发现错误。
使用 JSX编写模板更加简单快速。

  ReactDOM.render((
        <div>
            <p>
                ReactDOM.render 是React的基本方法，用于将JSX模板转换为Html语言，并插入到指定节点中
            </p>
            <p>
                ReactDOM.render 有三个参数：
                <ul>
                    <li>
                        第一个参数：要渲染的的ReactElement，只能有一个根节点
                    </li>
                    <li>
                        第二个参数：容器，组件渲染结果在DOM中要插入的未知
                    </li>
                    <li>
                        第三个参数：回调函数，可选。传入该值时，会在组件渲染完或更新完成后调用
                    </li>
                </ul>
            </p>
        </div>),document.getElementById('example'));

JSX表达式

        var a=1; 
        ReactDOM.render((
            <p>
                {a==1?'true':'false'}
            </p>
        ),document.getElementById('example'));

样式

        var style1={ 
            lineHeight:'32px',
            fontWeight:'bolder',
            border:'1px solid red'
        };
        
        ReactDOM.render((
        <div>
            <p className='normal'>
                选择器样式：注意：此处使用className的值来指定P标签的class样式，原因 class是React中的关键字
            </p>
            <p style={style1}>
                对象样式:通过一个对象来实现，该对象的内容即CSS对象的属性和值
                注意：
                1.单个单词的 CSS 属性（比如 padding, margin, color）保持不变。
                2.带有短横线的多个单词的 CSS 属性（比如 background-color, font-family, border-radius）变成去掉横线，并且第二个单词的首字母大写的驼峰规则命名的单词，即backgroundColor，fontFamily,boredrRadius
            </p>

            <p style={{ lineHeight:'32px',fontWeight:'bolder',border:'1px solid red' }}>
                内联样式
            </p>
        </div>
        ),document.getElementById('example'));

数组

var arr = [
    <h1>
        JSX 允许在模板中插入数组，数组会自动展开所有成员
    </h1>,
    <h2>
        我是数组的一个内容项
    </h2>
];
ReactDOM.render((
    <div>
        {arr}
    </div>
), document.getElementById('example'));

组件

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件

注意点：

React中创建的组件类以大写字母开头，驼峰命名法，
在React中使用React.createClass方法创建一个组件类
每个组件类都必须实现自己的render方法。输出定义好的组件模板。返回值：null、false、组件模板
组件类只能包含一个顶层标签

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

ReactDOM.render(
    <HelloMessage />,
    document.getElementById('example')
);

HTML标签与React组件
React即可以渲染HTML标签，也可以渲染React组件。

JSX语法约定了分别使用首字母大小写，来区分本地组的类和HTML标签：

HTML标签，标签名以小写字母开头
React组件，标签名以大写字母开头


var myDivElement = <div className="foo" >渲染普通html标签</div>;
React.render(myDivElement, document.getElementById('example'));


var MyComponent = React.createClass({
    render:function() {
        return (
            <div>
                渲染React组件，React.createClass创建了一个组件
            </div>
        );
    }
});

ReactDOM.render(<MyComponent />, document.getElementById('example'));

复合组件

var WebSite = React.createClass({
  render: function() {
    return (
      <div>
        <Name name={this.props.name} />
        <Link site={this.props.site} />
      </div>
    );
  }
});
 
var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
});
 
var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});
 
ReactDOM.render(
  <WebSite name="菜鸟教程" site=" http://www.runoob.com" />,
  document.getElementById('example')
);

props

props 负责给组件传值，给组件设置的属性，都会存储在this.props对象中，this.props对象的属性跟组件的属性是一一对应

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});
 
ReactDOM.render(
  <HelloMessage name="Runoob" />,
  document.getElementById('example')

...this.props
能够将父组件所有的属性都复制给子组件

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

ReactDOM.render(
    <Link href="http://www.baidu.com" name="百度搜索" />,
    document.getElementById("example")
);

this.props.children
这是一个例外，不跟组件属性对应，标识组件的所有子节点
在组件内容不确定是使用，在子组件中需要使用React.Children.map方法遍历所有子节点项

var ListComponent = React.createClass({
    render: function () {
        return (
            <ul>
                {
                    React.Children.map(this.props.children, function (child) {
                        // child是遍历得到的父组件的子节点  
                        return <li>{child}</li>
                    })

                }
            </ul>
        );
    }
});

ReactDOM.render(
    (
        <ListComponent>
            <h1>子节点1</h1>
            <p>子节点2</p>
            <div>子节点3</div>
        </ListComponent>
    ),
    document.getElementById("example")
);

组件默认属性

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

ReactDOM.render(
    <HelloMessage />,
    document.getElementById('example')
);

props 验证
用于验证组件实例的属性是否符合要求


    var title = "props验证测试";
// var title = 123;
var MyTitle = React.createClass({
    propTypes: {
        title: React.PropTypes.string.isRequired,
    },

    render: function () {
        return <h1> {this.props.title} </h1>;
    }
});
ReactDOM.render(
    <MyTitle title={title} />,
    document.getElementById('example')
);

state

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
当state发生变化时，会调用组件内部的render方法

var CheckButton = React.createClass({
    // 定义初识状态  
    getInitialState: function () {
        return {
            // 在这个对象中设置的属性，将会存储在state中  
            // 默认状态，未选中  
            isCheck: false
        }
    },
    // 定义事件绑定的方法  
    handleChange: function () {
        // 修改状态值，通过this.state读取设置的状态值  
        this.setState({
            isCheck: !this.state.isCheck
        });
    },

    render: function () {
        // 根据状态值，设置显示的文字  
        // 在JSX语法中，不能直接使用if，使用三目运算符  
        var text = this.state.isCheck ? "已选中" : "未选中";

        return (
            <div>
                <input type="checkbox" onChange={this.handleChange} />
                {text}
            </div>
        );

    }
});

ReactDOM.render(
    <CheckButton />,
    document.getElementById("example")
);

var Input = React.createClass({
    getInitialState: function () {
        return {
            value: "请输入"
        };
    },
    handleChange: function (event) {
        // 通过event.target.value读取用户输入的值  
        this.setState({
            value: event.target.value
        });
    },
    render: function () {
        var value = this.state.value;
        return (
            <div>
                <input type="text" value={value} onChange={this.handleChange} />
                <p>{value}</p>
            </div>
        );
    }
});

ReactDOM.render(
    <Input />,
    document.getElementById("example")
);

posted @ 2018-07-22 20:50 Alvin.Lee 阅读(305) 评论(0) 编辑收藏举报

刷新页面返回顶部

一个小码农

React入门实例

React入门实例

React介绍

JSX语法

组件

props

state

公告