Javascript

react介绍+脚手架+语法+组件+事件+state

本文主要是介绍react介绍+脚手架+语法+组件+事件+state,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

react

1- react的介绍

  • react是facebook团队开发和维护的一个前端框架

  • React 可用于创建 Web 用户交互界面。

  • React 不是一个完整的 MVC 框架,最多可以认为是 MVC 中的 V(View)

  • React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。

  • React 引入了虚拟 DOM(Virtual DOM)的机制。

  • React 引入了组件化的思想。

  • React 使用 Facebook 专门为其开发的一套语法糖--JSX。

react优点

  • React 速度很快

  • 一切皆是组件

  • 单向数据流

  • 同构、纯粹的 javascript

  • 兼容性好

react缺点

  • React 不适合做一个完整的框架。

  • React 并不是一个完整的框架,它只实现了 MVC 模式中的 V(View)层。如果构建大型项

    目需要一套完整的框架,基本都需要加上 ReactRouter 和 Flux 才能写大型应用。

2- 脚手架安装和使用

2-1 安装脚手架

只需安装一次

npm i create-react-app -g

2-2 创建项目

create-react-app 项目名

2-3 启动项目

  • 默认启动在3000端口

npm start
  • 修改启动的端口 package.json

 "start": "set port=3333 && react-scripts start",

2-4 项目目录

my-demo
    node_modules   相关依赖
    public      资源文件
        index.html   主页面
        ...  其他相关文件
    src     存放源代码
        index.js   主入口文件
        index.css   主样式文件
        app.js    根组件
        app.css   根组件样式
    .gitignore    忽略文件
    package.json    配置文件
    lock        配置文件

2-5 项目清空

3- react语法

安装react语法提示

  • ES7 React/Redux/GraphQL/React-Native snippets

  • 设置--> emmet---> 添加一个键值对 "javascript": "javascriptreact"

jsx语法:

  • js+xml

  • js代码中可以混合xml代码

  • xml是严格模式,必须有结束标签

3-1 注释语法

 {/* 注释语法 */}

3-2 数据绑定

 <h1>app组件标题</h1>
      {/* {} 模板语法 */}
      {/* 解析变量 */}
      <h2>学生姓名: {name} </h2>
      {/* 支持简单的运算符 */}
      <h3>{3+2}</h3>
      {/* 支持方法 */}
      <h3>{str.toUpperCase()}</h3>

3-3 属性绑定

 {/* 属性绑定 */}
 <img src={imgSrc} alt="" />

3-4 条件渲染

 {/* 显示一个按钮,如果flg=true  显示确定按钮,否则显示取消的按钮 */}
      {flg?<button>确定</button>:<button>取消</button>}
      
      {2==2?a:b}
​
      {flg?<p>条件成立</p>:null}

3-5 循环渲染

  • 必须要添加key,唯一的索引

 {/* 循环渲染 */}
      <ul>
        {/* <li>{arr[0]}</li> */}
​
        {/*循环是一定要有key,  主要是虚拟dom渲染,更新是diff算法 */}
        {arr.map(item => {
          return (<li key={item}>{item}</li>)
        })}
      </ul>

3-6 class 绑定

class--->className

{/* class 属性 */}
      <h1 className='tit1'>app组件标题</h1>
      {/* 根据条件添加类名 */}
      <h1 className={flg?'tit1':'tit'}>app组件标题</h1>

3-7 style

属性值需要是一个对象

 {/* style 属性需要是一个对象 */}
​
​
let obj = {
    color:'red',
    fontSize:'12px'
  }
​
      <h2 style={obj}>学生姓名: {name} </h2>
​
      <h2 style={{color:'red',fontSize:'12px'}}>学生姓名: {name} </h2>

4- 组件

  • 组件严格区分大小写

  • 组件名必须大写字母开头

  • 不需要转换驼峰式命名

  • 组件只需引入,即可调用

  • 组件文件的后缀名 .js/.jsx

4-1 函数组件

- 函数组件的声明

// 函数组件
​
// 引入组件的样式
import './Header.css'
​
function Header(){
    let val='header组件的数据'
    // return 的就是当前组件的结构
    return (
        <div className='header'>
            <h1>header组件--函数组件声明</h1>
            <h2>{val}</h2>
        </div>
    )
}
​
// 导出
export default Header

- 组件的调用

//引入
import Header from './Header.jsx'
//调用
<Header></Header>

4-2 类组件声明

// 列组件的定义

import React,{Component} from 'react'

import './Father.css'
// 类组件的声明
class Father extends Component{

    name='小明'
    
    // 渲染方法
    render(){
        console.log(this);
        // 返回当前组件
        return (
            <div className='father'>
                <h2>这是父组件-father</h2>
                <h1>{this.name}</h1>
            </div>
        )
    }

}

export default Father

4-3 区别

  • 函数组件不可以定义很多方法,类组件可以的

  • 类组件有生命周期,函数组件没有声明周期

  • 类组件有状态(state数据)的,函数组件没有状态(state)

  • 函数组件性能较好,类组件实际上是有一个实例化的过程

5- 事件处理

5-1 事件绑定

on+事件名='处理方法'

  • 不带()

    class Main extends Component{
    
        // 打印
        log(){
           console.log('111111') 
        }
        log1(){
           console.log('222222') 
        }
        {/* 绑定时不加() */}
         <h1 onClick={this.log.bind(this)}>main组件</h1>
  • 带()

    {/* 绑定时加() */}
     <h1 onClick={()=>this.log1()}>main组件</h1>

5-2 事件传参

  • 不带()

     {/* 事件传参 */}
      {/* 不带(), 传参需要在bind(this,实参1)方法中传递 */}
     <button onClick={this.fn.bind(this,'确定')}>确定</button>       
  • 带()

    {/* 带() */}
    <button onClick={()=>this.fn('取消')}>取消</button>

5-3 事件对象

  • 不带()

      {/* 事件对象获取 */}
    {/* 不带(), 默认接收一个形参(代表事件对象) */}
    <button onClick={this.myevent.bind(this)}>按钮1</button>
  • 带()

    {/* 带(),需要传递事件对象*/}
     <button onClick={(e)=>this.myevent(e)}>按钮2</button>
     
    fucntion(e){
     	return this.myevent(e)
     }

5-4 阻止事件冒泡

box(e){
        console.log('点击了box盒子');
        // 阻止事件冒泡
        e.stopPropagation()

    }

5-5 阻止默认事件

 cont(e){
        console.log(11);
        // 阻止默认事件
        e.preventDefault()
  }

5-6 事件捕获

on+事件名+Capture

<div className="wrap" onClickCapture={()=>this.wrap()} onContextMenu={(e)=>this.cont(e)}>
      <div className="box" onClick={(e)=>this.box(e)}></div>
</div>

6- state状态机

6-1 在constructor外面定义

 // 在constructor外部定义
    // state={
    //     name:'小白'
    // }

6-2在constructor内部定义

 // 在constructor内部定义
    constructor(){
        // 调用父类.  super() 之后才可以获取到this
        super()

        this.state={
            name:'小黑'
        }
    }

注意:

  • 数据不要随便定义,一般都声明在state.

  • state中的数据改变时可以引起视图的更新.不可以直接使用this.state.name=' ' 来修改数据.必须使用this.setState()方法来修改数据

  • this.setState() 是异步方法, ({修改数据},回调函数)

  • 修改数组

    add(){
            // 不可以直接操作数组修改
            // this.state.arr.push('es')
            
            // 修改数组 取,改,放
            let arr1 = this.state.arr
            arr1.push('es')
            arr1[1]='css3'
            this.setState({
                arr:arr1
            })
    
            // console.log(this.state.arr);
        }
  • 对象

     // 修改商品
        changeGoods(){
            // 修改goodsname
            // 取,改,放
            // 方式一
            // let obj1 = this.state.obj
            // obj1.goodsname = '电脑'
            // this.setState({
            //     obj:obj1
            // })
    
            // 方式二
            this.setState({
                obj:{
                    // 结构,
                    ...this.state.obj,
                    goodsname:'电脑'
                }
            })
        }
  • 可以对state解构

     // 结构state
            let {name,age,obj} = this.state
            return (
                <div>
                    <button onClick={()=>this.changeGoods()}>修改商品</button>
                    <h1>商品名称--{obj.goodsname}----{this.state.obj.id}</h1>
                    <button onClick={()=>this.changeAge()}>修改age</button>
                    {/* <h1>当前的name: {this.state.name}</h1> */}
                    <h1>当前的name: {name}</h1>
                    <h1>当前的age: {age}</h1>
                    <button onClick={()=>this.add()}>数组追加es</button>
                    <ul>
                        {this.state.arr.map(item=>{
                            return <li key={item}>{item}</li>
                        })}
                    </ul>
                </div>
            )
这篇关于react介绍+脚手架+语法+组件+事件+state的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!