zoukankan      html  css  js  c++  java
  • class创建组件

    # class创建组件

    ## class关键字创建组件

    ```
    import React from 'react'
    import ReactDOM from 'react-dom'

    import Hello from '@/components/Hello'
    import '@/components/jic'
    const kakaxi={
    name:"旗木卡卡西",
    age: '18',
    country:'日本'
    }
    class Movie extends React.Component{
    //由于Movie组件,继承了React.Component这个父类,所以,自定义的构造器中,必须调用super()
    constructor(){
    super()
    //只有在super()以后,才能使用this关键字
    //这个this.state={}相当于vue中的data(){return{}}
    this.state={
    msg:'这是state中的私有数据',
    you:''
    }
    }
    render(){
    //在class 关键字创建的组件中,如果想使用外界传递过来的props参数不需要接收,
    //直接this.props.xxx访问
    this.state.you='切克闹' //此时私有值可以更改
    /* 注意:在class组件内 this表示当前组件的实例对象*/
    return <div>这是Movie中的组件
    <div>调用私有数据---{this.state.msg}</div>
    <p>{this.state.msg} ----{this.state.you}</p>
    </div>
    }
    }
    const mydiv=<div >
    <div>123</div>
    <Hello {...kakaxi}></Hello>
    <Movie {...kakaxi}></Movie>
    <hr/>
    <Movie name={kakaxi.name} age={kakaxi.age}></Movie>
    </div>
    ReactDOM.render(mydiv,document.getElementById('app'))
    ```

    2.两种创建组件方式的对比

    注意:使用class关键字创建的组件,有自己的私有数据(this.state)和生命周期函数;

    注意:使用function创建的组件,只有props,没有自己的私有数据和生命周期函数;

    1.用构造函数创建出来的组件:叫做无状态组件【无状态组件用的不多】

    2.用class关键字创建出来的组件叫做有状态组件【用的最多】

    3.什么情况下使用有状态组件?什么情况下用无状态组件?

    - 如果一个组件需要有自己的私有数据,则推荐使用 :class创建的有状态组件;
    - 如果一个组件不需要私有的数据,则推荐使用,无状态组件;
    - React 官方说:无状态组件,由于没有自己的state和生命周期函数,所以运行效率会比又状态组件稍微高一些;

    有状态组件和无状态组件的本质区别就是:有无state属性和有无生命周期函数

    4。组件中的props和state/data之间的区别

    - props中的数据都是外界传递过来的;
    - state/data中的数据,都是组件私有的;(通过ajax获取回来的数据一般都为私有数据)
    - props中的数据都是只读的,不能重新赋值;
    - state/data中的数据,都是可读可写的;

    css启用模块化

    1.为了处理第三方样式应该把自己的样式以.scss或.less结尾,这样就可以只针对自己的.scss样式启用模块化

    ```javascript
    {test:/.css$/,use:['style-loader','css-loader??modules&localIdentName=[path][name]-[local]-[hash:5]']'] }
    ```

    例如引入bootstrap

    cnpm i bootstrap@3.3.7 -s

    在页面中引入,如果引入某个包的时候,这个包已经被下载到node_modules中,可以直接跳过node_modules这一级直接从要引入的文件开始。

    import bootcss from 'bootstrap/dist/css/bootstrap.css'

    ```javascript
    {test:/.ttf|woff|woff2|eot|svg$/,use:'url-loader'/}
    ```

    cnpm i url-loader -D

    cnpm i file-loader -D

    ```html
    <button className={[bootcss.btn,bootcss[btn-primary]].join()}></button>
    ```

    2.为了解决第三方样式表也被模块化,书写不方便,将自己书写的css样式都以.scss和.less结尾,只对less或sass文件进行模块化处理。

    cnpm i sass-loader node-sass -D //安装能够解析scss的loader

    ```javascript
    {test:/.css$/,use:['style-loader','css-loader'} //css改为
    {test:/.scss$/,use:['style-loader','css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]','sass-loader']} //新增加
    ```

    ```javascript
    import 'bootstrap/dist/css/bootstrap.css' //改为这个
    //因为第三方去掉了模块化所以向外暴露成员没有了意义
    ```



    事件

    注意:

    1.在React中,推荐使用this.setState({ })来修改状态值,只需要写想要修改的状态值,不需要修改的不用写

    this.setState({

    msg:'123'

    })

    2.this.setState方法的执行是异步的;如果大家想要在调用完this.setState之后,又想立即拿到最新的state值,需要使用this.setState({ },callback)

    3.//#region 区间折叠 //#endregin

    获取元素值 可以用 onChang={(e)=>{this.changtxt(e)}}

    <text onChang={(e)=>{this.changtxt(e)}} ref="txt"></text>

    changtxt=(e)=>{

    ​ (1) e.target.value

    ​ (2)利用ref this.refs.txt.value

    }


  • 相关阅读:
    Write an algorithm such that if an element in an MxN matrix is 0, its entire row and column is set to 0.
    旋转二维数组
    replace empty char with new string,unsafe method和native implementation的性能比较
    判断一字符串是否可以另一字符串重新排列而成
    移除重复字符的几个算法简单比较
    也来纠结一下字符串翻转
    判断重复字符存在:更有意义一点
    程序员常去网站汇总
    sublime
    针对程序集 'SqlServerTime' 的 ALTER ASSEMBLY 失败,因为程序集 'SqlServerTime' 未获授权(PERMISSION_SET = EXTERNAL_ACCESS)
  • 原文地址:https://www.cnblogs.com/liweiz/p/12626051.html
Copyright © 2011-2022 走看看