React基础

来源：互联网发布：windows系统音效编辑：程序博客网时间：2024/06/10 02:40

个人博客搭建完成，欢迎大家来访问哦
黎默丶lymoo的博客

什么是React

React是一个用于构建用户界面的JavaScript库，而不是一个MVC框架，但可以使用React作为MVC架构的View层轻易的在已有项目中使用。React起源于Facebook的内部项目，用来架设Instagram的网站，并于2013年5月开源。React拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

React的特点

虚拟DOM结构

以前没有ajax技术的时候，web页面从服务端整体渲染出html输出到浏览器端进行渲染，同样的，用户的一个改变页面的操作也会刷新整个页面来完成。直到有了ajax出现，实现页面局部刷新，带来的高效和分离让web开发者们惊叹不已。但随之而来的问题是，复杂的用户交互及展现需要通过大量的DOM操作来完成，这让页面的性能以及开发的效率又出现了新的瓶颈。
时至今日，谈到前端性能优化，减少DOM元素、减少reflow和repaint、编码过程中尽量减少DOM的查询等手段是大家耳熟能详的。而页面任何UI的变化都是通过整体刷新来完成的。幸运的是，React通过自己实现的DOM Diff算法，计算出虚拟页面当前版本和新版本之间的差异，最小化重绘，避免不必要的DOM操作，解决了这两个公认的前端性能瓶颈，实现高效DOM渲染。
我们知道，频繁的操作DOM所带来的性能消耗是很大的，而React之所以快，是因为它不直接操作DOM，而是引进虚拟DOM的实现来解决这个问题
对于页面的更新，React通过自己实现的DOM Diff算法来进行差异对比、差异更新，反映到页面上就是只重绘了更新的部分，从而提高渲染效率。

组件化

在业务开发中，遇到公共的模板部分，我们不得不将模板和规定的数据格式耦合在一起来实现组件。而在React中，我们可以使用JSX语法来封装组件，将组件的结构、数据逻辑甚至样式都聚合在一起，更加简单、明了、直观的定义组件。
有了组件化的实现，我们可以很直观的将一个复杂的页面分割成若干个独立组件，再将这些独立组件组合完成一个复杂的页面。这样既减少了逻辑复杂度，又实现了代码的重用。

配置React的开发环境

获取相关文件

首先我们需要获取到React的开发文件，可以从React官网下载相关配置文件，由于React用到的是JSX语法，浏览器是不能够直接进行解析的，还需要配置一个将JSX转换成JavaScript的文件，将链接中的代码复制到自己本地的任意新建的一个文件中保存完成配置，最后配置文件如下图所示：
React所需的环境配置文件

配置React开发文件模板

新建一个HTML文件进行如下配置，当这个文件配置好之后，以后需要开发React的程序都可以以这个为模板进行开发。

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <!--引入react核心库-->        <script type="text/javascript" src="build/react.js"></script>        <!--引入react的DOM操作-->        <script type="text/javascript" src="build/react-dom.js"></script>        <!--把JSX语法转换成浏览器能识别的JavaScript-->        <script type="text/javascript" src="build/browser.min.js"></script>    </head>    <body>        <!--把通过react生成的DOM放置在#container里面-->        <div id="container"></div>    </body>    <!--写JSX的地方需要设置为text/babel-->    <script type="text/babel">        // 在这里写react代码    </script></html>

JSX的认识

上文提到的JSX是什么东西呢？其实JSX是一种语法，不是一门新的语言，它既包括JavaScript和Xhtml语言，XHTML用标签来进行表示，JavaScript用{}展示。
这里主要注意的是写JSX的地方需要设置为text/babel，以及内部的书写规范

简单的React示例

这里举一个例子展示一个最简单的React程序
因为React放置的是虚拟的DOM结构，我们需要将它渲染至页面上，它提供的语法为ReactDOM.render()
它里面可以有三个参数，第一个为我们想要渲染至页面上的DOM元素，第二个为我们想在页面的哪个节点元素中进行渲染，第三个为渲染成功以后的回调

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <script type="text/javascript" src="build/react.js"></script>        <script type="text/javascript" src="build/react-dom.js"></script>        <script type="text/javascript" src="build/browser.min.js"></script>    </head>    <body>        <div id="container"></div>    </body>    <script type="text/babel">        var name = "zhangsan";        ReactDOM.render(            <h1>hello {name}</h1>,           document.getElementById("container")        );        // 这里有第二种写法        ReactDOM.render(            React.createElement("h1", null, "hello " + name),            document.getElementById("container")        )    </script></html>

展示的效果为 React示例
如果想要渲染出多个相同标签的不同内容，React也提供了一种方式，用key来确定标签的不同，以下展示部分script代码

var names = ["Alice", "Cindy", "Rose"];ReactDOM.render(    <ul>        {            names.map(function (name, key) {                return <li key={key}>{name}</li>            })        }    </ul>,    document.getElementById("container"))

展示的效果为 React示例

React组件

在react中将一些重用的dom结构进行了封装，就称为组件，它便于我们进行代码管理以及代码复用

组件的命名规则

首字母必须大写，使用驼峰命名法

组件的构建方法

React提供了一个命令为React.createClass()来创建一个组件，它内部包含一个必须要有的方法render，用来返回一个或多个的DOM结构

封装一个简单的组件示例

var HelloMessage = React.createClass({    render: function () {        return <h1>hello message</h1>    }});

这样就简单的封装了一个名为HelloMessage的组件，如果想要调用这个组件，方法为

ReactDOM.render(    <HelloMessage/>,    document.getElementById("container"))

复合组件

复合组件简单来说即是组件套用组件，我们来尝试封装一个复合组件

var Component1 = React.createClass({    render: function () {        return <h1>测试</h1>    }});var Component2 = React.createClass({    render: function () {        return <a href="http://www.baidu.com" target="_blank">去百度</a>    }});var Component3 = React.createClass({    render: function () {        return (            <div>                <Component1/>                <Component2/>            </div>        )    }});

React的CSS样式

React有三种添加样式的方法

1.内联样式

var StyleTest = React.createClass({    render: function () {        return <div style={{backgroundColor: "red", border: "10px solid #ccc"}}>Test</div>    }});ReactDOM.render(    <StyleTest/>,    document.getElementById("container"))

效果展示： React示例

2.对象样式

注意这里的styles都是以对象的格式进行书写的，千万不要以前的习惯后面写封号，字段名不加引号等等

var styles = {    color: "blue",    backgroundColor: "green"};var StyleTest = React.createClass({    render: function () {        return <div style={styles}>Test</div>    }});ReactDOM.render(    <StyleTest/>,    document.getElementById("container"))

效果展示： React示例

3.选择器样式

这个就和我们原来的CSS书写差不多，但是类名的添加不再是class，注意这里是className

<style>    .styles{        color: yellow;        background-color: black;    }</style>var StyleTest = React.createClass({    render: function () {        return <div className="styles">Test</div>    }});ReactDOM.render(        <StyleTest/>,    document.getElementById("container"))

效果展示： React示例

React的属性props

props简单来说就是一个组件的私有属性，从父组件传递一些需要的值到子组件中来使用
使用方法为this.props，这里的this便代表它的父组件，props则代表了父组件上的所有元素，是一个数组
用法示例:

var PropsTest = React.createClass({    render: function () {        return <h1>hello {this.props.name}</h1>    }});ReactDOM.render(    <PropsTest name="zhangsan"/>,  // 这里的name值会传递到h1的标签中相应的位置    document.getElementById("container"))

这里有一个特例为this.props.children，它表示的是组件的所有子节点

var PropsTest = React.createClass({    render: function () {        return {            <ol>                {                    React.Children.map(this.props.children, function (child)) {                        return <li>{child}</li>                    }                }            </ol>        }    }})ReactDOM.render({    <PropsTest>        <span>hello</span>        <span>world</span>    </PropsTest>,    document.getElementById("conotainer")})

效果展示： React示例

设置默认值

React提供一个专门设置props的默认值命令getDefaultProps
具体用法为：

var PropsTest = React.createClass({    getDefaultProps: function () {        // 设置该组件属性的初始值        return {            name: "lisi"        }    },    render: function () {        return <h1>hello {this.props.name}</h1>    }});ReactDOM.render(    <PropsTest/>,    document.getElementById("container"));

效果展示： React示例

设置props数据类型

var PropsTest = React.createClass({    propTypes: {        // 设置数据的类型        name: React.PropTypes.string.isRequired    },    getDefaultProps: function () {        return {            name: "lisi"        }    },    render: function () {        return <h1>hello {this.props.name}</h1>    }});ReactDOM.render(    <PropsTest/>,    document.getElementById("container"));

React的状态state

React把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染UI，让用户界面和数据保持一致。
React里，只需更新组件的state，然后根据新的state重新渲染用户界面（不要操作DOM）。
getInitialState方法用于定义初始状态，也就是一个对象，这个对象可以通过this.state属性读取。当用户点击组件，导致状态变化，this.setState方法就修改状态值，每次修改以后，自动调用this.render方法，再次渲染组件。

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 ? '喜欢' : '不喜欢';        return (            <p onClick={this.handleClick}>                你<b>{text}</b>我。点击切换状态。            </p>        );    }});ReactDOM.render(    <LikeButton />,    document.getElementById("container"));

React组件生命周期

React的生命周期可以分为三个状态：
1.Mounting：已插入真实DOM
2.Updating：正在被重新渲染
3.Unmounting：已移出真实DOM

生命周期的方法

componentWillMount:在渲染前调用,在客户端也在服务端。
componentDidMount:在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
componentWillReceiveProps:在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate:返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。
componentWillUpdate:在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate:在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount:在组件从DOM中移除的时候立刻被调用。
以下示例在Hello组件加载以后，通过componentDidMount方法设置一个定时器，每隔100毫秒重新设置组件的透明度，并重新渲染

var Hello = React.createClass({    getInitialState: function () {        return {            opacity: 1.0        };    },    componentDidMount: function () {        this.timer = setInterval(function () {            var opacity = this.state.opacity;            opacity -= .05;            if (opacity < 0.1) {                opacity = 1.0;            }            this.setState({                opacity: opacity            });        }.bind(this), 100);    },    render: function () {        return (            <div style={{opacity: this.state.opacity}}>                Hello {this.props.name}            </div>        );    }});ReactDOM.render(    <Hello name="world"/>,    document.getElementById('example'));

原文链接

0 0