React简介和组件的介绍
- React简介
- React组件
- 个人总结
1. React简介 - React主要有三个不同于其他框架的特点:
-
专注视图层
React与其他框架最明显的不同是React专注于提供view层解决方案,它并不是一个完整的MVC/MVVM框架,不仅仅如此,它还是一个包含View和Controller的库。对于复杂的应用,可以根据应用场景自行选择业务层框架,并根据需要搭配 Flux、Redux、GraphQL/Relay 来使用。 -
虚拟DOM树
相比较传统的页面开发需要每次更新都重新操作DOM相比,React做出了很大的优化,它把真实 DOM 树转换成 JavaScript 对象树(虚拟DOM),每次更新时,会重新计算虚拟DOM并与上一次的进行比较,只更新变化的部分。而且React的生命周期之一shouldComponentUpdate也是通过只更新变化的部分来减少DOM消耗、优化性能。 -
虚拟DOM树
函数式编程是React的精髓。所谓函数式编程就是构建一个规则以去减少冗余的代码,而这个规则可以被反复的使用。React可以将需要重复构建的UI过程抽象为组件,根据传入参数的不同区渲染不同的页面。
2.React组件
React组件基本上由组件的构建方式、组件内的属性状态与生命周期方法组成。
- 组件的传值
a:父组件传值子组件:
在引用子组件的时候传递,相当于一个属性,例如:在子组件内通过porps.param获取到这个param的值。
父组件向子组件传值,通过props,将父组件的state传递给了子组件。
父组件代码片段:
import React from 'react';
import ReactDOM from 'react-dom';
import User from './User';//引入子组件
//定义数据
const person = {
name: 'Tom',
age:20
}
ReactDOM.render(
//渲染子组件,并向子组件传递name,age属性
<User name={person.name} age={person.age}></User>
, document.getElementById('root'));
b:子组件传值父组件:
子组件通过调用父组件传递到子组件的方法向父组件传递消息的。
子组件 Son.js 文件代码示例:
import React from 'react';
class Son extends React.Component {
//构造方法
constructor(){
super();
this.state = {
inputValue:''
}
}
//按钮点击事件
handleClick(){
//通过props属性获取父组件的getdata方法,并将this.state值传递过去
this.props.getdata(this.state.inputValue);
}
//输入框事件,用于为this.state赋值
handleChange(e){
this.setState({
inputValue: e.target.value
});
}
render(){
return (
<React.Fragment>
<input onChange={this.handleChange.bind(this)}></input>
<button onClick={this.handleClick.bind(this)}>点击获取数据</button>
</React.Fragment>
);
}
}
export default Son;
c:兄弟组件传值
兄弟组件之间的传值,是通过父组件做的中转 ,流程为:
组件A – 传值 --> 父组件 – 传值 --> 组件B
代码示例:
创建 Acls.js 组件,用于提供数据
import React from 'react';
class Acls extends React.Component {
//按钮点击事件,向父组件Pcls.js传值
handleClick(){
this.props.data("hello...React...");
}
render(){
return (
<button onClick={this.handleClick.bind(this)}>Acls组件中获取数据</button>
);
}
}
export default Acls;
创建父组件 Pcls.js 用于中转数据
import React from 'react';
import Acls from './Acls';
import Bcls from './Bcls';
class Pcls extends React.Component {
//构造函数
constructor(){
super();
this.state = {
mess: ''
}
}
//向子组件Acls.js提供的传值方法,参数为获取的子组件传过来的值
getDatas(data){
this.setState({
mess: data
});
}
render(){
return (
<React.Fragment>
Pcls组件中显示按钮并传值:
<Acls data={this.getDatas.bind(this)}></Acls>
<Bcls mess={this.state.mess}></Bcls>
</React.Fragment>
);
}
}
export default Pcls;
创建子组件 Bcls.js 用于展示从 Acls.js 组件中生成的数据
import React from 'react';
class Bcls extends React.Component {
render(){
return (
<div>在Bcls组件中展示数据:{this.props.mess}</div>
);
}
}
export default Bcls;
- 组件的构建方式
a.React.createClass:
b.ES6 classes创建类
c.无状态函数(只传入props和context)
3.个人总结
个人对于React的部分基本概念有了更全面的认识,在此之前,我其实一直不太清楚React与其他框架比如Vue、Angular,现在我认识到了:
1. React最大的好处就是它的跨平台优势,react-native能让你用相同的组件模型编写有本地渲染能力的 APP (iOS 和 Android)。还能同时跨平台开发。
2. React很灵活,它的虚拟DOM的概念很大程度提高了性能优化和资源节约,这一点和Vue相似。而且React的精髓——函数式编程也节省了很多冗余代码的编写,便于测试。