《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({
	定义的变量: 想要设置的具体值
})