React学习札记

最新推荐文章于 2022-08-04 20:36:39 发布

安静的Sunny

最新推荐文章于 2022-08-04 20:36:39 发布

阅读量462

点赞数 1

CC 4.0 BY-SA版权

分类专栏：《JavaScript》

本文链接：https://blog.youkuaiyun.com/u011153817/article/details/54882414

《JavaScript》专栏收录该内容

8 篇文章

订阅专栏

一、React是什么？

React是一个由Facebook于2013年5月开源的库，采用MVC模式。而React它最初只是Facebook的一个内部项目使用的框架，由于它的设计思想独特，性能出众，代码逻辑简单，可以说优于市面上流行的基他JavaScript MVC框架，因此，越来越多的人开始关注并使用React,从而也使得React变成了时下最热门的前端框架。
由它衍生的React Native项目当前也变得火热起来，一时间使得从事Android与IOS开发的同学担心自己在不久的将来可能会丢了饭碗，因为React Native是一种用写Web App的方式去写Native App。那样同一组人就只需要写一次界面，就可以运行在Android,IOS,PC等各个端。

React

二、React怎么用？

$2.1、安装

由于React是一个库，得先进行依赖，React的依赖有3种，

一种是直接下载解压使用：

你可以在官网 http://reactjs.cn/react/downloads.html 下载最新版。然后解压到指定目录下，并
在< script src=”“/>引用路径里面指定react.js,react-dom.js的路径。

一种是使用内容分发网络(CDN)：

<script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script>

注：
上面使用的是.min文件，即压缩文件，这个是生产环境的，开发者看不到源码。
当然，便于调试，我们可以使用未经压缩的文件，比如：

<script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script>

上面的react.js与react-dom.js两者是必须要的。其中react.js是React的核心库，react-dom.js提供与DOM操作相关的功能。除此之外我们还会引入browser.js库：用于将JSX语法转化为JavaScript语法。

另一种就是用npm命令来安装React:

$ npm install react -g --save
$ npm install react-dom -g --save

全局安装React,–save是将包添加至package.json文件（*这个文件是调用npm init 命令自动生成的）

$2.2、使用示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
   <script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script>
   <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script>
   <script src="http://static.runoob.com/assets/react/browser.js"></script>
  </head>

  <body>
    <div id="example"></div>

    <!-- 如果使用JSX，则type应为text/babel-->
    <script type="text/babel">

    <!-- 渲染方法-->
      React.render(
          <!-- JSX语法：HTML标签直接写在JavaScript中，不加任何引号-->
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

$2.3、组件式开发

组件式开发的模型以及它的概念，这里不再赘述。在JavaScript中，对模块化或组件式开发，目前非常流行的一个库是require.js。它有以下优点：

可以实现js文件的异步加载，避免了网页因加载过多的js文件而失去响应；
用于管理模块之间的依赖性，便于代码的编写和维护。

如果想要依赖某个模块时，只需调用require()方法即可，返回这个组件的对象。如：

//注意，定义的这个ComponentName组件名首字母必须大写。
var ComponentName = require('../common/js/Test.js');

组件式开发的核心思想是，一个组件为一个js文件。
在React里面，可以通过React.createClass({})方法来创建一个组件，这个方法里面{}实现一系列的接口，其中render:function(){};接口是必须实现的。当需要关注React的生命周期时，其与各生命周期相关的接口就得实现。比如：

//sate状态初始化
getInitialState:function(){
    return {
        open:false,
        online:true
    };
},

//当state状态改变时调用
componentDidUpdate:function(){
    //todo 
},

//组件挂载完毕时调用
componentDidMount:function(){
    //todo
},

//render是必须要实现的方法
//当调用React.render(<组件/>,document.getElementById('Root'))方法时，该方法就会被回调
render:function(){
    return (
    <div>测试渲染</div>
    );
}

同时，在这个组件里面，自己也可以封装一些方法，在render里面来调用。

组件作为一个对象，也可以理解成一个DOM节点，因为它最终在渲染的时候也会加入到HTML文档中，但它又不是真正的DOM节点，而是一种数据结构，只有在组件被挂载到DOM以后，才会变成真正的DOM节点，因此，组件也被称为虚拟DOM。

同时组件作为一个对象，它有自己的生命周期，而其生命周期可以分成三个状态：
- Mounting:已经插入了真实的DOM
- Updating:正在被重新渲染
- Unmounting:已经移出真实的DOM

除了Unmounting状态只有一种处理函数外，其它每个状态都有两种处理函数，will函数在进入状态之前调用，did函数在进入状态后调用。比如：
- componentWillMount():将要挂载组件；
- componentDidMount(): 组件挂载成功；

此外，React还提供两种特殊的处理函数：
- componentWillReceiveProps(object nextProps):已挂载成功的组件在收到新的参数时回调
- shouldComponentUpdate(object nextProps,object nextState):当组件需要重新渲染时回调。

组件即对象，因此，组件有相应的属性，我们可通过this.props来获取当前组件对象的指定属性。

var HelloClass = React.creatClass({
    render:function(){
        return (
        //读取组件的属性，这个名字是随便取的。
        <h1>随便取的属性名：<font color='red'>{this.props.sunny}</font></h1>
        );
    }
});

React.render(<HelloClass sunny="我是sunny"/>,document.body);

如图：

像其它编程语言一样，有时我们需要指定变量的类型。而在React里面，由于组件的属性可以接受字符串、对象、函数等任意值。这时，为了对使用者进行约束，我们也可以指定属性的类型，这时就要用到PropTypes,eg:

var PropesTest = React.createClass({
    //定义两个属性,在引用该组件时，如果用到这两个属性，则值的类型必须符合给定的类型，
    //否则会报错。
    propTypes:{
        name:React.PropTypes.string.isRequired,
        content:React.PropTypes.string.isRequired,
    },

    render:function(){
        return (
        <h1>名字：{this.props.name}+"\n内容："+{this.props.content}</h1>
        );
    }
});
//情况一：
React.render(<PropesTest name=1111 content="内容"/>,document.getElementById("example"));
//情况二：
React.render(<PropesTest name="我是**" content="哈哈"/>,document.getElementById("example"));