本文介绍了React，一个由Facebook开发的JavaScript库，用于构建用户界面。文章重点讲解了React如何通过组件化、声明式编码、虚拟DOM和JSX提升开发效率，以及state、props和ref等关键概念的应用。
学习React
React简介
用于构建用户界面的JavaScript库（只关注页面），将数据渲染为HTML视图
由Facebook开发且开源
React可以克服原生JS的以下缺点：
-
原生JS操作DOM繁琐且效率低，因为用DOM-API操作UI；
-
JS直接操作DOM会使浏览器进行大量的重绘重排；
-
原生JS没有组件化编码方案，代码复用率低
React特点
-
采用组件化模式，声明式编码，提高开发效率及组件复用率
-
在React Native中可以使用React语法进行移动端开发；
-
使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。
对比两次生成的虚拟DOM，如果重复，直接用页面之前有的DOM，而不是全部重绘真实DOM
引入文件
-
react.js （核心库）：核心库要在react-dom之前引入
-
react-dom.js ：提供操作DOM的react扩展库
-
babel.min.js：解析JSX语法代码转为JS代码的库，即ES6==>ES5;JSX==>JS
-
react.js需在react-dom.js之前引入
JSX
全称: JavaScript XML，是react定义的一种类似于XML的JS扩展语法，本质是React.createElement(component, props, ...children)方法的语法糖。JXS最终产生的虚拟DOM就是一个JS对象。
为什么要用JSX
-
更加简单的创建虚拟DOM
-
使用JSX创建
<script type="text/babel"> const VDOM=( <h1 id="title"> hello,react </h1> ) ReactDOM.render(VDOM,document.getElementById('test')) </script> -
使用js创建
<script type="text/JavaScript"> const VDOM=React.createElement('h1',{id:'title'},'hello,react') ReactDOM.render(VDOM,document.getElementById('test')) </script>
-
-
JSX创建虚拟DOM的方法是JS方法的语法糖
jsx语法规则
-
定义虚拟DOM时，不要写引号
-
标签中混入js表达式时要用{}
-
样式的类名指定不要用class，要用className
-
内联样式，要用style={{key：value}}的形式去写
-
只有一个根标签
-
标签必须闭合
-
标签首字母：
-
若小写字母开头，则将该标签转为HTML中同名的元素，若HTML中无该标签对应的同名元素，则报错
-
若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错
-
辨析js表达式和js语句（代码）
-
表达式:一个表达式可以产生一个值，可以放在任何需要值的地方
-
a
-
a+b
-
demo(1)
-
arr.map()
-
function test(){}
-
-
语句(代码)
-
if(){}
-
for(){}
-
switch (){case:xxxx}
-
虚拟DOM
-
本质是Object，即一般对象（不是数组对象和函数对象）
-
虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是react内部在用，无需真实DOM中那么多属性
-
虚拟DOM最终会被react转换为真实DOM呈现在页面上
模块与组件
-
模块
-
向外界提供特定功能的js程序。随着业务逻辑增加，代码越来越多且复杂，此时js一般会拆成多个js文件来编写，一般一个js文件就是一个模块
-
作用：复用js，简化js的编写，提高js的运行效率
-
模块化：当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
-
-
组件
-
用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)。比如一个功能齐全的Header栏就是一个组件
-
复用编码, 简化项目编码, 提高运行效率
-
组件化：当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
-
React面向组件编程
创建组件
-
函数式组件
适用于简单组件(无state)
<script type="text/babel">
// 创建函数组件
function MyComponent(){
return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
</script>
注意事项：
函数中的this指向undefined，因为babel编译后开启了严格模式
本例中，执行了ReactDOM.render(<MyComponent/>.......）之后， 发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
-
类式组件
适用于复杂组件(有state)
<script type="text/babel">
//1.创建类式组件
class MyComponent extends React.Component {
render(){
return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
}
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
</script>
注意事项：
1.类式组件必须要继承react的内值类React.Component 2.一定要写render函数，且要有返回值 3.render是放在类的原型对象上，供实例使用。 4.render中的this指向类的实例对象（原因见下方） <=> 类式组件的实例对 象。
本例中，执行了ReactDOM.render(<MyComponent/>.......）之后，发生了什么？
1.React解析组件标签，找到了MyComponent组件。 2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。 3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
组件实例的三大属性
针对于类式组件，hooks可以让函数式组件也有三大属性
1.state属性
-
state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合) -
组件被称为"状态机", 通过更新组件的
state来更新对应的页面显示(重新渲染组件)
<script type="text/babel">
//1.创建组件
class Weather extends React.Component{
//构造器调用几次？ ———— 1次，只写了一个weather标签
constructor(props){ //为了操作state
console.log('constructor');
super(props)
//初始化状态
this.state = {isHot:false,wind:'微风'}
//解决changeWeather中this指向问题
this.changeWeather = this.changeWeather.bind(this)
}
//render调用几次？ ———— 1+n次 1是初始化的那次 n是状态更新的次数
render(){
console.log('render');
//读取状态
const {isHot,wind} = this.state //这种写法的依据?
//复杂方法
// const isHot = this.state.isHot;
// const wind = this.state.wind;
return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
}
//、这里onclick是赋值语句，不能调用
//changeWeather调用几次？ ———— 点几次调几次
changeWeather(){
//changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用
//由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
//类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined
console.log('changeWeather');
//获取原来的(isHot值
const isHot = this.state.isHot
//严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换（wind还在）。
this.setState({isHot:!isHot})
console.log(this);
//严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！
//this.state.isHot = !isHot //这是错误的写法
}
}
//2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))
</script>
注意事项
-
在构造器
constructor中初始化state，且要用对象形式初始化state -
在
render函数中创建虚拟DOM时，直接在标签中绑定事件，且事件写法不同于原生JS，如原生JS中的onclick事件，在react中要写成onClick，其他同理。 -
onClick={this.changeWeather}是将this.changeWeather函数赋值给onClick，函数后面不能加括号，否则就是将函数返回值赋值 -
事件的回调函数要写在类中，此时它放在类的实例对象的原型链上，供实例使用。在本例中，由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用，且类中的方法默认开启了局部的严格模式，所以其中this的指向不是实例对象，而是undefined。render函数也是放在对象的原型链上，但是它是由类的实例对象调用的，所以this指向实例对象
-
自定义的事件回调函数的
this可以在构造器中用bind更改指向，生成的新函数直接在类中，所以this指向实例对象 -
注意： 状态必须通过setState以对象的形式进行更新,且更新是一种合并，不是替换
-
const {isHot,wind} = this.state是ES6中的对象解构，获取多个对象属性的方法
简写方法
<script type="text/babel">
//1.创建组件
class Weather extends React.Component{
//初始化状态 类里可以直接写赋值语句，相当于追加属性（值写死）
state = {isHot:false,wind:'微风'}
render(){
const {isHot,wind} = this.state
return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
}
//自定义方法————要用赋值语句的形式+箭头函数
// changeWeather从原型上移到实例对象自身，外层函数的this就是箭头函数的this
changeWeather = ()=>{
const isHot = this.state.isHot
this.setState({isHot:!isHot})
}
}
//2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))
注意事项
-
类里可以直接写赋值语句，相当于追加属性（值写死），所以state可以直接在类里通过赋值的形式初始化，而不是在构造函数中
-
自定义回调函数的指向可以通过将箭头函数赋值的方式，从原型上转移到实例对象自身，箭头函数中
this指向外层函数中的this，这里即为实例对象
强烈注意
-
组件render方法中的this为组件实例对象
-
组件自定义的方法中this为undefined，如何解决？
-
强制绑定this通过函数对象的bind()
-
可以在constructor中用bind，也可在绑定事件函数时用bind，即
onClick={this.changeWeather.bind(this)） -
箭头函数
-
-
状态数据，不能直接修改和删除
2.props属性
-
作用：通过标签属性（创建虚拟DOM时直接添加的数据）从组件外向组件内传递变化的数据
-
传递props，即传递标签属性，props批量传递标签属性
-
每个组件对象都会有props（properties的简写）属性
-
组件标签的所有属性都保存在props中
-
注意：组件内部不要修改props数据
<script type="text/babel">
//创建组件
class Person extends React.Component{
render(){
// console.log(this);
const {name,age,sex} = this.props
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age+1}</li>
</ul>
)
}
}
//渲染组件到页面
ReactDOM.render(<Person name="jerry" age={19} sex="男" speak={speak}/>,document.getElementById('test1'))
ReactDOM.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('test2'))
const p = {name:'老刘',age:18,sex:'女'}
ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))
function speak(){
console.log('我说话了');
}
</script>
注意事项
-
写入数据有两种方式
-
在虚拟DOM标签中直接写入数据，如
<Person name="18" age={18} sex="女"/>（{18}代表是数值型，“18”代表是字符串）。props是对象，里面存储着键值对形式，name="18"中，name是键，"18"是值 -
在虚拟DOM标签中用扩展运算符展开对象，如<Person {...p}/>。这里…不是三点（拓展/展开运算符），因为对象不能使用拓展运算符（数组和可遍历的伪数组可以）。而{...obj}是ES6语法，是一个复制对象。但是在这里，{...p}并不是复制对象，因为这里的{}表示括号里面要写js表达式了，所以真正写的还是...p，这里react+babel就允许用展开运算符展开对象，不能随便使用（不能用console.log()查看）,仅仅适用于标签传递数据时。
-
-
数据会存入到类式组件
props属性中，在render中可以通过this.props获取数据 -
内部读取某个属性值用
this.props.属性名 -
组件类的构造函数constructor可省
在 react 组件挂载之前，会调用它的构造函数。在为
React.Component子类实现构造函数时，应在其他语句之前调用super(props)。否则，this.props 在构造函数中可能会出现未定义的 bug。
通常，在 react 中，构造函数仅用于以下两种情况： a）通过给
this.state赋值对象来初始化内部state。 b）为事件处理函数绑定实例
对props进行限制
首先要引入prop-types库，用于对组件标签属性进行限制
限制porps有两种方法：
-
限制内容写在类外面
Person.propTypes = {
name:PropTypes.string.isRequired, //限制name必传，且为字符串
sex:PropTypes.string,//限制sex为字符串
age:PropTypes.number,//限制age为数值
speak:PropTypes.func,//限制speak为函数
}
//指定默认标签属性值
Person.defaultProps = {
sex:'男',//sex默认值为男
age:18 //age默认值为18
}
-
限制内容写在类里面
static propTypes = {
name:PropTypes.string.isRequired, //限制name必传，且为字符串
sex:PropTypes.string,//限制sex为字符串
age:PropTypes.number,//限制age为数值
}
//指定默认标签属性值
static defaultProps = {
sex:'男',//sex默认值为男
age:18 //age默认值为18
}
注意事项：
-
首字母小写的propTypes是类里的属性规则
-
首字母大写的PropTypes是prop-types库里的内置对象
-
React v15.5 开始已弃用的写法
name: React.PropTypes.string.isRequired
函数组件使用props
三大属性中，只有props可以用于函数组件，因为函数可以接收参数，state和refs都不能用于函数组件。
<script type="text/babel">
//创建组件
function Person (props){
const {name,age,sex} = props
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age}</li>
</ul>
)
}
Person.propTypes = {
name:PropTypes.string.isRequired, //限制name必传，且为字符串
sex:PropTypes.string,//限制sex为字符串
age:PropTypes.number,//限制age为数值
}
//指定默认标签属性值
Person.defaultProps = {
sex:'男',//sex默认值为男
age:18 //age默认值为18
}
//渲染组件到页面
ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
</script>
-
限制props只能使用第一种方式，写在外面
3.refs属性
组件内的标签可以定义ref属性来标识自己
this.refs拿到真实DOM
字符串形式的 ref
class Demo extends React.Component{
//展示左侧输入框的数据
showData = ()=>{
console.log(this);
const {input1} = this.refs
alert(input1.value)
}
//展示右侧输入框的数据
showData2 = ()=>{
console.log(this);
const {input2} = this.refs
alert(input2.value)
}
render(){
return(
<div>
<input ref="input1" type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
//渲染组件到页面
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
不被官方推荐，因为效率不高
回调ref
内联函数（推荐）
<input ref={currentNode => this.input1 = currentNode } type="text" placeholder="点击按钮提示数据"/>
{/*这里的this是指向实例对象，因为箭头函数没有指向，查找外侧的this指向*/}
注意：
-
函数中的参数
currentNode是ref所在的节点 -
此时
input1是类的属性，即直接绑定到类里，而不是像字符串ref一样添加到refs对象里
回调函数：有定义、没有执行（函数名()）、最终执行（别人调用）
今天就先更新到这吧！
扫一扫
1420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
