React框架随笔

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（Virtual DOM）和组件化的开发深深的吸引了我，现将所得记下来。

一、React简介

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

二、对ReactJS的认识及ReactJS的优点

首先，对于React，有一些认识误区，这里先总结一下

React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；
React的服务器端Render能力只能算是一个锦上添花的功能，并不是其核心出发点，事实上React官方站点几乎没有提及其在服务器端的应用；
有人拿React和WebComponent相提并论，但两者并不是完全的竞争关系，你完全可以用React去开发一个真正的Web Component；
React不是一个新的模板语言，JSX只是一个表象，没有JSX的React也能工作。

三、React组件

组件属性
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。
下面，我们来编写第一个组件Greet，有一个name属性，然后输出hello + name的值，代码如下：

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

      React.render(
        <Greet name="Jack" />,
        document.getElementById('container')
      );

看到这段代码，接触过AngularJS的朋友们是不是有一种熟悉的感觉，不过这里有几点需要注意：

　　1、获取属性的值用的是this.props.属性名

　　2、创建的组件名称首字母必须大写。

　　3、为元素添加css的class时，要用className.

　　4、组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}
2、组件状态
　　组件免不了要与用户互动，React的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI 。下面我们来编写一个小例子，一个文本框和一个button，通过点击button可以改变文本框的编辑状态，禁止编辑和允许编辑。通过这个例子来理解ReactJS的状态机制。先看代码：

　　var InputState = React.createClass({
        getInitialState: function() {
          return {enable: false};
        },
        handleClick: function(event) {
          this.setState({enable: !this.state.enable});
        },
        render: function() {
          
          return (
            <p>
               <input type="text" disabled={this.state.enable} />
               <button onClick={this.handleClick}>Change State</button>
            </p>
          );
        }
      });

      React.render(
        <InputState />,
        document.getElementById('container')
      );

这里，我们又使用到了一个方法getInitialState,这个函数在组件初始化的时候执行，必需返回NULL或者一个对象。这里我们可以通过this.state.属性名来访问属性值，这里我们将enable这个值跟input的disabled绑定，当要修改这个属性值时，要使用setState方法

原理分析：
　　当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
　　
这里值得注意的几点如下：
　　1、getInitialState函数必须有返回值，可以是NULL或者一个对象。

　　2、访问state的方法是this.state.属性名。

　　3、变量用{}包裹，不需要再加双引号。
　
　该文参考：

https://blog.csdn.net/a1943206465/article/details/60570567

来源：https://www.cnblogs.com/tian874540961/p/10179237.html

标签

react

前端组件