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

《React 学习》

React 学习

基础知识

React

React 对象

ReactDOM对象

JSX