首页 > > 网页制作 > Javascript >

React学习笔记之react基础篇（1）

2018-10-03 18:00:19来源：博客园阅读 ()

一.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')
);

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有