剑客
关注科技互联网

面向工资编程:React速度入门。

面向工资编程:React速度入门。

面向工资编程:React速度入门。

自从工资长时没升后,小编上了各种招聘app看了各种招聘要求,好吧,小编还是安安定定的呆在这里吧。招聘要求五花八门。

蓝瘦,

香菇。

为了面向工资编程,一起看看怎么入手这么一个react.js吧。纯小白编程入门。

——-请关注我:@小萧ovo 一起学习、交流、分享。

React 起源于 Facebook 的内部项目,于2013年5月开源。先总结一下:

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

下载地址:

ReactJS官网地址: http:// facebook.github.io/reac t/

Github地址: https:// github.com/facebook/rea ct

https:// facebook.github.io/reac t/downloads.html

这里面有所需要引用的js文件 https:// github.com/ruanyf/react -demos/tree/master/build

面向工资编程:React速度入门。

ReactJs下载非常简单,下载完成后,看到的是一个压缩包。解压后,我们新建一个html文件,引用里面的 react.js 和 react-dom.js 这两个js文件以及browser.js。 并非必需引入browser.js

  • 引入它的作用是使浏览器支持babel,你可以使用ES2015进行编码。如果你用ES5,可以不引入。

到这里我们就可以开始编写代码了,首先我们先来认识一下ReactJs里面的React.render方法:

React.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。

下面我们在script标签里面编写代码,来输出Hello,world,代码如下:(这里我引入了browser.js)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<title>热点电视</title>
<meta name="keywords" content="热点电视的关键词">
<meta name="description" content="热点电视的网站描述">
<script src="build/react.js"></script> 
<script src="build/react-dom.js"></script> 
<script src="build/browser.min.js"></script> 
<link rel="stylesheet" href="css/main.css"/>

</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
</body>
</html>

面向工资编程:React速度入门。

上面代码有两个地方需要注意。首先,最后一个 <script> 标签的 type 属性为 text/babel 这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。 凡是使用 JSX 的地方,都要加上 type="text/babel" 。

  • react.js 是 React 的 核心库
  • react-dom.js提供与 DOM 相关的功能
  • Browser.js 的作用是 将 JSX 语法转为 JavaScript 语法 ,这一步 很消耗时间 ,实际上线的时候,应该将它放到服务器完成。(转换只要在 浏览器解析之前就可以了)

上面代码中, browser.js 是Babel提供的转换器脚本,可以在浏览器运行。用户的ES6脚本放在 script 标签之中,但是要注明 type="text/babel" 。

注意,网页中实时将ES6代码转为ES5,对性能会有影响。生产环境需要加载已经转码完成的脚本。下面是如何将代码打包成浏览器可以使用的脚本,以 Babel 配合 Browserify 为例。首先,安装 babelify 模块: Babel 入门教程 (这个自阅,暂时先让他影响着,先把门入了)。

面向工资编程:React速度入门。

  • ReactDOM.render():

ReactDOM.render 是 React 的最基本方法。

用于将模板转为 HTML 语言,并插入指定的 DOM 节点。

上面例子里的代码就是将一个 h1 标题,插入到 example 节点里面。

  • JSX 语法:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<title>热点电视</title>
<meta name="keywords" content="热点电视的关键词">
<meta name="description" content="热点电视的网站描述">
<script src="build/react.js"></script> 
<script src="build/react-dom.js"></script> 
<script src="build/browser.min.js"></script> 
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
    <div id="example"></div>
   <script type="text/babel">
      var names = ['Alice', 'Emily', 'Kate'];

      ReactDOM.render(
        <div>
        {
          names.map(function (name) {
            return <div>Hello, {name}!</div>
          })
        }
        </div>,
        document.getElementById('example')
      );
    </script>
</body>
</html>

面向工资编程:React速度入门。

HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是JSX 的语法。

允许 HTML 与 JavaScript 的混写。

体现了 JSX 的基本语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<title>热点电视</title>
<meta name="keywords" content="热点电视的关键词">
<meta name="description" content="热点电视的网站描述">
<script src="build/react.js"></script> 
<script src="build/react-dom.js"></script> 
<script src="build/browser.min.js"></script> 
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
    <div id="example"></div>
   <script type="text/babel">
    var arr = [
	  <h1>Hello world!</h1>,
	  <h2>React is awesome</h2>,
	];
	ReactDOM.render(
	  <div>{arr}</div>,
	  document.getElementById('example')
	);
    </script>
</body>
</html>

面向工资编程:React速度入门。

上面代码的arr变量是一个数组,结果 JSX 会把它的所有成员,添加到模板。

  • ReactJS组件

ReactJS是基于组件化的开发,React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。

React.createClass 方法就用于生成一个组件类。

写第一个组件Greet,有一个name属性,然后输出hello + name的值:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<title>热点电视</title>
<meta name="keywords" content="热点电视的关键词">
<meta name="description" content="热点电视的网站描述">
<script src="build/react.js"></script> 
<script src="build/react-dom.js"></script> 
<script src="build/browser.min.js"></script> 
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
    <div id="example"></div>
   <script type="text/babel">
    var Greet = React.createClass({
    	render: function(){
    		return <h1>Hello {this.props.name}</h1>;
    	}
    });

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

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

面向工资编程:React速度入门。

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

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

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

3)为元素添加css的class时,要用className。

4)组件的style属性的设置方式也值得注意,要写成style={{width: this.state.witdh}}。

  • 组件状态

组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI 。

下面写一个文本框和一个button,通过点击button可以改变文本框的编辑状态,禁止编辑和允许编辑。通过这个例子来理解ReactJS的状态机制。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<title>热点电视</title>
<meta name="keywords" content="热点电视的关键词">
<meta name="description" content="热点电视的网站描述">
<script src="build/react.js"></script> 
<script src="build/react-dom.js"></script> 
<script src="build/browser.min.js"></script> 
</head>
<body>
    <div id="example"></div>
   
   <script type="text/babel">
    var InputState = React.createClass({
	  getInitialState: function() {
	    return {enable: false};
	  },
    	handleClick: function(event){
    		this.setState({enable: !this.state.enable});
    	},
    	render: function(){
	    	return(
	    		<div>
	    			<input type="text" ref="getInputState"  disabled={this.state.enable}/>
	    			<button onClick={this.handleClick} >dianji</button>
	    		</div>
	    	);
	    }
    });
    ReactDOM.render(
    	<InputState />,
    	document.getElementById('example')
    );
    </script>
</body>
</html>

面向工资编程:React速度入门。 click:

面向工资编程:React速度入门。

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

原理分析:

当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。

这里值得注意的几点如下:

1)getInitialState函数必须有返回值,可以是NULL或者一个对象。

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

3)变量用{}包裹,不需要再加双引号。

  • 组件的生命周期

组件的生命周期分成三个状态:

  • Mounting:已插入真实 DOM
  • Updating:正在被重新渲染
  • Unmounting:已移出真实 DOM

React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。

  • componentWillMount()
  • componentDidMount()
  • componentWillUpdate(object nextProps, object nextState)
  • componentDidUpdate(object prevProps, object prevState)
  • componentWillUnmount()

此外,React 还提供两种特殊状态的处理函数。

  • componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
  • shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用
  • 下面代码在hello组件加载以后,通过 componentDidMount 方法设置一个定时器,每隔100毫秒,就重新设置组件的透明度,从而引发重新渲染。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<title>热点电视</title>
<meta name="keywords" content="热点电视的关键词">
<meta name="description" content="热点电视的网站描述">
<script src="build/react.js"></script> 
<script src="build/react-dom.js"></script> 
<script src="build/browser.min.js"></script> 
</head>
<body>
    <div id="example"></div>
   
   <script type="text/babel">
   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.body
);
    </script>
</body>
</html>

面向工资编程:React速度入门。
面向工资编程:React速度入门。

  • 主要是理解这些功能的使用,其次就是
  1. this.props.children :表示组件的所有子节点。
  2. PropTypes:用来验证组件实例的属性是否符合要求。
  3. 表单:文本输入框的值,不能用 this.props.value 读取,而要定义一个 onChange 事件的回调函数,通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况。
  4. Ajax:通常是通过 Ajax 请求从服务器获取,可以使用 componentDidMount 方法设置 Ajax 请求,等到请求成功,再用 this.setState 方法重新渲染 UI,可以使用 jQuery 完成 Ajax 请求。

  • ReactJS小结

关于ReactJS就先学习到这里了,下面来总结一下,主要有以下几点:

1、ReactJs是基于组件化的开发,所以最终你的页面应该是由若干个小组件组成的大组件。

2、可以通过属性,将值传递到组件内部,同理也可以通过属性将内部的结果传递到父级组件(留着研究);要对某些值的变化做DOM操作的,要把这些值放到state中。

3、为组件添加外部css样式时,类名应该写成className而不是class;添加内部样式时,应该是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。因为 React 组件样式是一个对象,所以第一重大括号表示这是 JavaScript 语法,第二重大括号表示样式对象。

4、组件名称首字母必须大写。

5、变量名用{}包裹,且不能加双引号。

  • 参考资料

React文档

React入门实例教程

颠覆式前端UI开发框架:React

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址