一.react特点归纳
1.声明式的视图层：react 模板写在 js 文件中，而不是 html 的 <script> 标签中。能使用所有 js 语法，而不只有模板语法，所以更加灵活。
2.简单的更新流程：当状态数据发生变化时，react也会根据最新的状态渲染出最新的ui。
3.灵活的渲染实现：react并不是把视图直接渲染成最终的终端界面，而是先把它们渲染成虚拟dom。
4.高效的dom操作：我们可以直接操作javascript对象取代一个真实的dom节点。
二.es6语法简介
因为react项目一般都是用es6语法来写的，所以es6语法的学习是十分有必要的。
1.var丶let丶const
var是es5声明的变量，let是es6声明的变量，const声明一个只读的常量，一旦声明，常量的值就不能改变
2.箭头函数
es6允许使用“箭头”（=>）定义函数，该方式不需要function关键字和return关键字，同时箭头函数中的this指向函数定义时的上下文对象，而不是函数执行时的上下文对象。
例如：
我要评论var f=a=>a+1;
//等价于
var f =function(a){
return a+1;
}
function foo(){
this.bar=1;
this.f= (a) => a+this.bar;
}
//等价于
function foo(){
this.bar=1;
this.f=(function(a){
return a+this.bar
}).bind(this);
}
//如果函数体内包含的语句多于一条，就需要用大括号将函数体括起来，使用return返回
例如：
var f =(x,y) => {
x++;
y--;
return x+y;
}
3.模板字符串
模板字符串是增强版的字符串，用反引号（ ' )表示字符串
例如：
//普通字符串
'feiyumofan!'
//多行字符串
'react is wonderful !
react is beautiful ! '
//字符串中嵌入变量
var name = "wxf";
'hello , ${name} !';
4.解构赋值
es6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称之为解构。
例如：
//数组解构
let [a,b,c] = [1,2,3];
//对象解构
let name = 'wxf';
let age = 4;
let person = {name,age};
//对象解构另外一种形式
let person ={name:'wxf' , age:4};
let {name,age} =person;
//函数的参数解构
function sum ([x,y]){
return x+y;
}
sum([1,2]); //3
//对象参数解构
function sum({x,y}) {
return x+y;
}
sum({x:1,y:2});
//嵌套解构的数组解构
let [a,[b],c] =[1,[2],3];
//嵌套结构的对象解构
let {person: {name,age},foo} ={person:{name:'wxf',age:4},foo:'foo'};
5.rest参数
es6引入rest参数（形式为...变量名）用于获取函数的多余参数。
例如：
function input(one,...two){
console.log(two)
}
input('one','two','three'); //['two','three']
6.扩展运算符
扩展运算符是三个点（...)，它将一个数组转化为用逗号分隔的参数序列，类似于rest参数的逆运算。
例如：
function sum(a,b,c){
return a+b+c;
}
let numbers = [1,2,3]
sum(...numbers) //将数组转换成参数序列进行输入
//合并数组
let arr1 = [1];
let arr2 = [2];
let arr4 = [3];
[...arr1,...arr2,...arr3]; [1,2,3]
//与解构赋值结合
let [a,...rest] =[1,2,3]
rest //[2,3]
7.class
es6中引用了class(类)这个概念
//定义一个类
class person{
constructor(name,age) { //可参照java中的构造方法
this.name =name;
this.age =age;
}
getname(){
return this.name;
}
getage(){
return this.age;
}
}
//创建对象
let person = new('wxf',4);
三.jsx语法简介
jsx是一种用于描述ui的javascript扩展语法，react使用这种语法描述组件的ui.
1.jsx简单运用
reactdom.render(
<div>
<h1>react</h1>
<h2>欢迎学习 react</h2>
<p data-myattribute = "somevalue">这是一个很不错的 javascript 库!</p>
</div> ,
document.getelementbyid('example') //将该组件渲染到example节点上去
);
2.javascript表达式
我们可以在 jsx 中使用 javascript 表达式。表达式写在花括号 {} 中。实例如下：
reactdom.render(
<div>
<h1>{1+1}</h1>
</div>,
document.getelementbyid('example')
);
在 jsx 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。以下实例中如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值，则会输出 false.
reactdom.render(
<div>
<h1>{i == 1 ? 'true!' : 'false'}</h1>
</div>,
document.getelementbyid('example')
);
3.注释
注释需要写在花括号中，实例如下：
reactdom.render(
<div>
<h1>菜鸟教程</h1>
{/*注释...*/}
</div>,
document.getelementbyid('example')
);
4.数组
jsx 允许在模板中插入数组，数组会自动展开所有成员：
var arr = [
<h1>react</h1>,
<h2>三大主流框架之一</h2>,
];
reactdom.render(
<div>{arr}</div>,
document.getelementbyid('example')
);
四.react组件
1.组件的定义
import react,{component} from "react";
class demo extends component { //定义了demo组件
render(){ //定义了render（）方法
return{
<div>
<ul>
测试代码
</ul>
</div>
}
export default demo; //将demo作为默认模块导出，从而在其他页面中可以进行组件的调用
2.组件的props(组件的属性）
组件的props用于在我们使用一个组件（父组件）调用另外一个组件（子组件）的时候，把父组件中的数据通过props（一个对象）传递给子组件，供子组件使用。
示例（函数组件）：
function hellomessage(props) { //子组件hellomessage,使用es5中的function进行定义
return <h1>hello {props.name}!</h1>;
}
const element = <hellomessage name="runoob"/>; //父组件element，同时通过props传入数据name
reactdom.render(
element,
document.getelementbyid('example')
);
让我们再来看一个更加完善的使用方法：
首先我们创建一个子组件postitem
class postitem extends component{
render(){
const{title,author,date}= this.props; //通过props接收父组件传过来的数据
return(
<div>
<li>{title}</li> //将数据在页面中进行显示
<li>{author}</li>
<li>{date}</li>
</div>
);
}
}
export default postitem;
接下来我们来创建一个父组件postlist向子组件postitem传递数据同时进行子组件的调用
//定义常量来存储我们需要传递的数据
const data = [
{title:1,author:1,date:1},
{title:2,author:2,date:2},
{title:3,author:3,date:3},
];
class postlist extend component{
render(){
return(
<div>
{data.map(item=> //data调用map函数对数据进行循环操作
<postitem //调用子组件同时通过props传递数据
title={item.title}
author={item.author}
date={item.date}
/>
</div>
);
}
}
3.组件的state
组件的state是组件内部的状态，state的变化最终将反映到组件ui的变化上。
示例：
class clock extends react.component {
constructor(props) { //通过constructor函数初始化组件状态
super(props);
this.state = {date: new date()}; //通过this.state定义了组件的状态
}
render() {
return (
<div>
<h1>hello, world!</h1>
<h2>现在是 {this.state.date.tolocaletimestring()}.</h2>
</div>
);
}
}
reactdom.render(
<clock />,
document.getelementbyid('example')
);
* 有状态组件和无状态组件
上述组件因为涉及到了状态的变化，所以我们可以把它看成有状态组件，那什么是无状态组件呢？我们来看一下下面这个示例
function hellomessage(props) { //子组件hellomessage,使用es5中的function进行定义
return <h1>hello {props.name}!</h1>;
}
这也就是无状态组件了，我们也可以称之为函数组件
在我们开发react应用时，一定要先认真的思考哪些组件应该设计成有状态组件，哪些组件应该设计成无状态组件。并且，应该尽可能多的使用无状态组件，无状态组件不用关心状态的变化，只聚焦于ui的展示，因此更容易被复用。
4.组件的事件处理
简单的事件处理函数
<button onclick={activatelasers}>
激活按钮
</button>
当我们使用 es6 class 语法来定义一个组件的时候，事件处理器会成为类的一个方法。例如，下面的 toggle 组件渲染一个让用户切换开关状态的按钮：
class toggle extends react.component {
constructor(props) {
super(props);
this.state = {istoggleon: true};
// 这边绑定是必要的，这样 `this` 才能在回调函数中使用
this.handleclick = this.handleclick.bind(this); //将当前类的this绑定到对应的函数上
}
handleclick() {
this.setstate(prevstate => ({
istoggleon: !prevstate.istoggleon
}));
}
render() {
return (
<button onclick={this.handleclick}>
{this.state.istoggleon ? 'on' : 'off'}
</button>
);
}
}
reactdom.render( //将组件渲染到example节点上
<toggle />,
document.getelementbyid('example')
);
如对本文有疑问， 点击进行留言回复！！
androidx+viewpage+tablayout+json开发（加载图片和视频）
网友评论