React初步入门的知识整理

对于angularJS我现在不做评价,现在大热的react和vue,都是前端组件化的方向,建议入门其中任意一个。今天我就来谈谈react的初步入门咯。

简要介绍react,渲染视图的的一个javascript依赖库,不是一个MVC框架,保证组件代码的简单化,调试简单、开发简单
详细信息:中文网(http://www.css88.com/react/docs/component-specs.html)社区(http://react-china.org/)官网(https://facebook.github.io/react/)

使用react就最好基于node.js(最好版本在4.7之上,又不要太新版本),npm去管理包,与webpack、gulp一起使用,保证框架不要太重。

推荐学习多看看官方文档!!

给我感觉用react最深的便是:
1、学习react,也需要学习es6语法,学习最新的语法知识;
2、react、微信小程序、vue语法都很接近,重心都在组件上
3、react用的是虚拟DOM,这就让jquery的地位下降了很多,上手时候很不习惯
4、我总是把react组件看成一个状态机–React 把用户界面当作简单状态机。把用户界面想像成拥有不同状态然后渲染这些状态,可以轻松让用户界面和数据保持一致。
React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。React 来决定如何最高效地更新 DOM。

复用组件需要充分讨论,然后再去开发,就能减轻工作,来看看我写的移动端的页面底部

页面底部

(目前只能展示部分)配置文件:

var webpack = require('webpack');
var path = require('path');
module.exports = {
  //入口文件
  entry: {
    // index: ['./pc/resources/entry/index'],
    mobile: ['./wap/resources/entry/mobile.index'],
    footer: ['./wap/resources/entry/mobile.footer']
  },
  //输出文件
  output: {
    path: path.join(__dirname, './wap/resources/build'),
    // path: path.join(__dirname, './pc/resources/build'),
    filename: '[name].build.js'
  },
  resolve: {
    extensions: ['.css', '.js', '.jsx']
  },

footer.js:Footer组件
页面底部四个导航有两个状态:激活和未激活,
默认设置为未激活;
激活状态则是引用组件的判断,我目前是通过type:1 首页,2 vr是怎么玩的,3 玩什么vr游戏,4 我  四个模块来作区分
整个引用方式特别简单

import React, {
	Component
} from 'react';
import {
	render
} from 'react-dom';

var url = location.search;
var urlObj = url2json(url);
var type = urlObj.type ? urlObj.type : 1;
class Footer extends Component {
	constructor(props) {
		super(props);
		this.state = {
			index: props.index,
			items: [{
				img: "/src/img/mobile/home.svg",
				_href: '/?type=1',
				title: '首页',
				_class:''
			}, {
				img: "/src/img/mobile/video.svg",
				_href: "/vr_video?type=2",
				title: '游戏视频',//游戏视频
				_class:''
			}, {
				img: "/src/img/mobile/game_gray.svg",
				_href: "/vr_app?type=3",
				title: '游戏',//游戏
				_class:''
			}, {
				img: "/src/img/mobile/account.svg",
				_href: "/account?account=1&type=4",
				title: '我',
				_class:''
			}]
		};
	}

	render() {
		const items = this.state.items.map(function(item, i) {
			if (i+1==this.state.index) {
				item._class="color-yellow";
				switch (+this.state.index) {
					case 1:
						item.img = '/src/img/mobile/home_yellow.svg';
						break;
					case 2:
						item.img = '/src/img/mobile/video_yellow.svg';
						break;
					case 3:
						item.img = '/src/img/mobile/game_yellow.svg';
						break;
					case 4:
						item.img = '/src/img/mobile/account_yellow.svg';
						break;
				}
			}

			return (
				<a href={item._href} key={item.title}>
			<img src={item.img} alt="vr榜单"/><br/>
			<span className={item._class}>{item.title}</span>
			</a>)
		}, this);

		return (
			<div className="footer-container">
		{items}
		</div>
		);
	}
}

render(<Footer index={type}/>, document.getElementById('footer'));

欢迎分享本文,转载请保留出处:前端ABC » React初步入门的知识整理

赞 (2)
分享到:更多 ()

发表评论 0