《React 学习》


React 学习

个人博客地址:

图片


基础知识

VS-Code 开发工具基本使用

// 常用快捷键
! --- 使用英文状态下的“!”回车生成html基本模板代码

扩展知识:html 标签的lang属性的使用(用来定义浏览器如何解析html) 常用值:en(英文)、zh-CN(中文)...

扩展插件的使用:Path Autocomplete(输入部分地址,实现路径自动填充)、Auto Close Tag(元素标签自动闭合)...

React

以script 文件引入的方式使用

需要引入react.min.js & react-dom.min.js

引入成功之后就可以在script脚本里面打印语句了
浏览器全局环境window下面会挂载一个React属性 & 一个ReactDOM属性,它们的值是一个对象(引用类型)
console.log(React)
console.log(ReactDOM)

jsx语法转换成javascript语法插件~  常用browser.js babel-core
react.js --- react的核心库
react-dom.js --- 提供操作DOM相关的功能

React 对象

React 对象下的属性集

Children(Object)
Component(Function)
DOM(Object)
PropTypes(Object)     属性类型
PureComponent(Function)
cloneElement(Function)
createClass(Function)   创建自定义组件(涉及jsx语法  JavaScriptXml)
createElement(Function)  创建元素(标签)
createFactory(Function)
createMixin(Function)
isValidElement(Function)
version(String)

// 创建虚拟DOM节点
var myDiv = React.createElement(
	'元素标签名称',
	'属性',
	'内容'
)

var myDiv = React.createElement(
	'div',
	null,
	'mydiv'
)

// 创建自定义组件
var myComponent = React.createClass({
	myFunction: function () {
		console.log('myFunction')
	},
	render: function () {
		return 元素标签
	}
})

var myComponent = React.createClass({
	myFunction: function () {
		console.log('myFunction')
	},
	myClick: function () {
		console.log('myClick')
	},
	render: function () {
		return <div className="box" onClick={ this.myClick } >{ this.myFunction() }</div>
	}
})

ReactDOM对象

ReactDOM 对象下的属性集

findDOMNode(Function) 寻找节点
render(Function) 渲染函数
unmountComponentAtNode(Function)
unstable_batchedUpdates(Function)
unstable_renderSubtreeIntoContainer(Function)
version(String)

// 渲染虚拟DOM节点
ReactDOM.render(
	'需要渲染的标签元素',
	'挂载至目标标签元素内'
)

JSX

JSX语法

使用className代替class

注释:
{ /*  注释内容 */ }

var myComponent = React.createClass({
	myFunction: function () {
		console.log('myFunction')
	},
	myClick: function () {
		console.log('myClick')
	},
	render: function () {
		return <div className="box" onClick={ this.myClick } >
			{ /* 单行注释  */ }
			{ this.myFunction() }
		</div>
	}
})

// 使用样式
var myComponent = React.createClass({
	myFunction: function () {
		console.log('myFunction')
	},
	myClick: function () {
		console.log('myClick')
	},
	render: function () {
		return <div className="box" style={{ color: 'red' }} onClick={ this.myClick } >
			{ /* 单行注释  */ }
			{ this.myFunction() }
		</div>
	}
})

// 使用state
var myComponent = React.createClass({
	myFunction: function () {
		console.log('myFunction')
	},
	myClick: function () {
		console.log('myClick')
	},
	// 设置组件初始数据
	getInitialState: function () {
		return {
			// 定义各种变量, 使用this.state.变量名称
		}
	},
	render: function () {
		return <div className="box" style={{ color: 'red' }} onClick={ this.myClick } >
			{ /* 单行注释  */ }
			{ this.myFunction() }
		</div>
	}
})

// 修改变量
this.setState({
	定义的变量: 想要设置的具体值
})

版权声明:本文为yk_ddm原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。