Reactjs快速上手

2024年4月7日 127次阅读 来源: yuhualingfeng

React简述

React是由fackbook开放的一个构建用户接口的javascript类库,其主要目的是为了开发随时间数据不断变化的大型应用程序,许多开发者将React视作为MVC模式中的V.2011年React开始被fackbook工程师着手开发,并作为内部使用,2013年正式开源,学习react需要掌握一定的JavaScript基础。

React的优势

  • 交互式开发 ：当有数据发生变化时，界面会发生相应的变化.

  • 组件为开发单元：React是由组件作为开发单元的,一个组件可以包含一个或多个其他组件.

  • 可以在多个平台中使用: React除了可以在webapp中使用,还可以借助React Native将其应用到IOS和Android应用程序.

开发前的准备

开发React程序需要引入必要的文件,下面是一个React程序的基本构架:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React</title>
    <script src='//cdn.bootcss.com/react/0.14.3/react.js'></script>
    <script src='//cdn.bootcss.com/react/0.14.3/react-dom.js'></script>
    <script src='https://npmcdn.com/babel-core@5.8.38/browser.min.js'></script>
</head>
<body>
</body>
</html>

这里我们引入了三个文件,这几个文件我都是通过bower进行安装的,首先是react.js,这个主要包含了React的相关方法的定义.react-dom.js是将我们定义的组件插入到html文档中.browser.min.js这个文件的作用是将具有JSX语法的代码转换为JavaScript代码,假如我们使用的是JavaScript编写代码则这个文件可以不引用.当然你可以先使用JSX编写，然后通过react-tools进行离线转换.

一个小Demo

这里先给大家列出一个小的例子,让大家先尝尝鲜.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Search Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src='//cdn.bootcss.com/react/0.14.3/react.js'></script>
    <script src='//cdn.bootcss.com/react/0.14.3/react-dom.js'></script>
    <script src='https://npmcdn.com/babel-core@5.8.38/browser.min.js'></script>
    <style>
        div{text-align: center;font:normal 20px/50px microsoft yahei;}
        input{width:80%;border-radius: 4px;border:solid;text-align: center;height: 30px;}
    </style>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
    
var SearchInput = React.createClass({
    handerChange: function(){
        this.props.setName(this.refs.seachbox.value);
    },
    render: function(){
        return (
            <div>
                <input type='text' ref = 'seachbox' onChange={this.handerChange}/>
            </div>
        );
    }
});

var List = React.createClass({
    render:function(){
    var lists = this.props.lists;
    var filterWord = this.props.filterWord;
    var rows = [];
    lists.forEach(function(list){
        if(list.toLowerCase().indexOf(filterWord.toLowerCase())!=-1){
            rows.push(<div>{list}</div>);
        } 
        
    }.bind(this));
        return (
            <div>{rows}</div>
        );
    }
});    

var SearchBox = React.createClass({
    getInitialState: function(){
        return {
        filterWord:''
        };
    },
    setName: function(filterWord){
    this.setState({filterWord:filterWord});
    },
    render: function(){
        return (
            <div>
                <SearchInput setName = {this.setName}/>
                <List filterWord = {this.state.filterWord} lists = {this.props.lists}/>
            </div>
        );
    }
});

var lists = ['Jack','Wason','Marray','Lucy','Jummy','Herry','Bob'];
ReactDOM.render(<SearchBox lists= {lists}/>,document.getElementById('container'));        
</script>
</body>
</html>

这是一个简单的搜索功能的实现,以上代码可以直接放在html文件中运行.这里我们一共定义了三个组件,分别是SearchInput List SearchBox,这里有一点需要提示大家:组件名的首字母必须大写.SearchInput和 List作为SearchBox的子组件,我们创建组件是使用的React.createClass方法,并通过ReactDOM.render将组件添加到html文档中.

这里面还有两个比较特殊的值this.props和this.state.这两个的区别在于this.props在载入后不会发生改变,而this.state可以通过被设置从而导致相应的变化.

React API

React API定义了两个对象React和ReactDOM.

React对象

React.Component

React.Component是在ES6语法下定义组件使用到的，如下:

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

React.createClass

React.createClass方法也是用于定义一个组件,其参数为一个对象，这个对象必须包含render方法,render方法返回一个元素,例如div.这个元素下可以包含任意个html标签或者React组件.

var Component  = React.createClass({
    render:function(){
        return (
        <div>Hello World!!!</div>
        );
    }
);

传入这个方法的对象中可以自定义属性,当然还有一些具有特殊意义的属性,具体如下:

  • render：返回需要展示的组件元素

  • getInitialState：返回值作为this.state的初始值.

  • getDefaultProps：返回值作为this.props的值,其优先级低于直接通过调用该组件时设置的值.

  • propTypes:对this.props中的值做数据类型验证，一般作为开发调试使用,具体的类型请点击查看

  • mixins:传入此属性的值为一个对象，这个对象中的属性或方法将会被扩展到此组件中,它存在的意义是为了复用.

  • statics:传入此属性的值为一个对象，这个对象中的属性或方法将会被扩展到此组件类中

var MyComponent = React.createClass({
  statics: {
    customMethod: function(foo) {
      return foo === 'bar';
    }
  },
  render: function() {
  }
});

MyComponent.customMethod('bar');  // true

  • displayName:当开发调试时在控制台中使用到的组件名.

  • componentWillMount:组件将要被加载时触发此方法

  • componentDidMount:组件加载成功后触发此方法

  • componentWillReceiveProps:当this.props值发生变化时触发此方法,但初始化组件时不会触发。

  • shouldComponentUpdate：当this.props或this.state的值发生变化时触发，并通过返回值确定是否触发更新事件.但初始化组件时不会触发。

  • componentWillUpdate：组件即将更新时触发此方法.

  • componentDidUpdate：组件即将更新完成后触发此方法.

  • componentWillUnmount：组件即将被卸载时触发此方法.

React.createElement

创建一个新的React元素

React.createElement(string/ReactClass Type,[props],[childrens...]);

第一个参数是创建的元素,可以是html标签,也可以是自定义的React组件;第二参数是一个对象,其作为this.props的初始值;第三个及后面的参数为此元素的子元素.

ReactDOM.render(
    React.createElement("div", null, 
            React.createElement(SearchInput, {setName: this.setName}), 
            React.createElement(List, {filterWord: this.state.filterWord,                lists: this.props.lists})
        ),doucment.getElementById('container'));

React.cloneElement

复制一个React元素,同时合并其props和子元素.

React.cloneElement(ReactClass Type,[props],[childrens...]);

React.createFactory

返回一个生成指定类型 ReactElements 的函数

React.isValidElement

判断一个对象是否为有效的React元素.

var ele = React.createElement('div');
React.isValidElement(ele);  // ture

React.DOM

React.DOM 运用 React.createElement 为 DOM 组件提供了方便的包装。该方式仅在未使用 JSX 的时候适用。例如，React.DOM.div(null, 'Hello World!')，这里封装了一个div DOM组件。

React.PropTypes

此对象是为组件的this.props的验证做准备的.

React.createClass({
    propTypes:{
        name:React.PropTypes.string,
        age:React.PropTypes.number
    }
    ...
});

这里是期望this.props.name的值类型为String,this.props.age的值类型为Number.

React.Children

此对象可对this.props.children进行数据处理.

React.Children.map(object children, function fn [, object thisArg])

React.Children.forEach(object children, function fn [, object thisArg])

React.Children.count(object children)

React.Children.only(object children)

React.Children.toArray(object children)

ReactDOM对象

ReactDOM.render

ReactDOM.render是将定义的组件渲染到DOM元素中.

ReactDOM.render(<Comment/>,document.getElementById('container'));

ReactDOM.unmountComponentAtNode

ReactDOM.unmountComponentAtNode是将已经渲染的React组件从DOM元素中移除.

ReactDOM.unmountComponentAtNode(document.geElementById('container'));

ReactDOM.findDOMNode·

当组件加载成功返回渲染的DOM元素.

DOMElement findDOMNode(ReactComponent component)
    原文作者：yuhualingfeng
    原文地址: https://segmentfault.com/a/1190000006172643
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞