React各种注意事项,踩过的坑.

注意事项

用create-react-app创建项目,因要配置各种组件，比如babel，antd等，

需要运行 npm run eject 命令把项目的配置文件暴露出来, 运行完多出一个config目录 =>其中就是和vue-cli相似的各种配置 ->并且不可逆

运行完create-react-app 要添加css-loader配置,

 

1.创建React组件的时候,首字母必须要大写,否则会出错

 

2.展开运算符 (...) 运用好时,可以节省很大的代码开销

 

3.新建的React组件,必须先引入react包,否则会报错

 

4.可通过配置webpack来使我们引入的组件自动追踪组件后缀名,具体查看React学习文档 ->webpack配置完要重启,

 

5.@符号在vue-cli包里面是自动配置好的,但是在React脚手架里面需要自己配置 ->配置完webpack记得重启

首先需要运行 npm run eject 暴露配置选项

 

然后找到对应的配置选项 alias: 将 '@': paths.appSrc 填入其中,重启webpack服务就可以在引入(import)文件的时候使用 @了

 

6.使用构造函数创建的React组件和使用class关键字创建的React组件存在一定的异同点:

6.1 构造函数创建的组件必须首先引入 React包 而使用class关键字创建的React组件不用(继承的除外)

 

6.2构造函数的实例方法一般挂在到构造函数的原型对象上,这样就不用在实例化(new)构造函数的时候过多占用内存了(每个实例对象都有改实例方法)

function

 

7.使用class关键字创建组件的注意事项:

①class类必须继承自React.Component类,

②在组件内部必须有一个render函数 返回值为jsx的虚拟dom结构

③必须使用export default暴露一下此先声明的类

④在class组件中如果要使用外接传递过来的参数,不需要接收,直接可以使用 this.props来使用

 

8.如果要使用行内样式

import React from 'react';

class ChartDemo extends React.Component{
    constructor() {
        super();
        this.state = {

        }
    }
    render() {
        /*如果要使用行内样式 用例如下*/
        /*red不用引号报过 将会被当做变量解析 */
        return <div className="chart">
            <div style={{color:'red'}}>评论人: {this.props.name}</div>
            <div>评论内容: {this.props.chartContent}</div>
        </div>
    }
}

export default ChartDemo;

9.在使用外联css样式表的时候,一定要给 sass/css 添加module选项,这样可以防止样式的冲突, 在vue中避免样式冲突的方式是 <style scoped> </style>

 

具体操作为: 一 运行 npm run eject 暴露配置选项:

 

然后在此文件内修改 css/sass的module配置为true既可

 

此时

 

样式表的class被包装了 因此在使用的时候 必须使用

import css from '@/css/style.css'

然后使用css.class的方式将class添加到jsx的虚拟dom上

 

 

注意: 只开启modules的配置项 输出的class名是一堆混乱的字母 这样不好调试 可以在module下面添加一定的配置来让我们更好识别此编译的类名

localIdentName:'[path][name]__[local]__[hash:base64:5]'

 

 

注意可以使用gloabal将特定的类不被模块化(就是不被将style变成全局生效,经过了处理),没有此选项默认添加了 :local() => 此设置 在设置完module之后 默认的class会被编译

:global(.test){ //不会被编译 font-size: 19px; }

 

但是如果使用第三方的样式表的话,第三方的样式都是以 .css 结尾 要以上面的配置也会把第三方样式模块化,这样在使用第三方样式的话会很麻烦.因此,我们一般的做法为:

①:将我们自己写的css样式表文件后缀修改成 .scss 然后只对.scss的文件添加模块化

ps:使用react-create-app创建的项目 默认不添加sass loder 安装命令为:

npm install sass-loader node-sass --save-dev

 

②:将css文件的模块化去掉

 

8.在使用事件函数的时候,可以这样写

 

 

①在虚拟Dom上添加 (注意:在此用箭头函数的方式间接调用confirm可以改变this的指向,方便以后调用this.setState)

(在普通的函数当中,this指向调用它的元素,但是箭头函数中,this是指向上一级的元素比方说)

let root = document.getElementById('root');
// root.onclick = function () {
//     this.style.background = 'red';//此时this就是指向调用函数的root元素的
// }


root.onclick = () => {
    this.style.background = 'red';//但是此时的this指向的是window对象,
}

 

<button className="btn btn-success" onClick={()=>{this.confirm()}}>确定</button> 
//此时箭头函数里面只有一行函数,可以被优化成
<button className="btn btn-success" onClick={()=>this.confirm()}>确定</button> //将{}省掉

 

 

②用一个变量来接收一个箭头函数

confirm = () =>{
    console.log(this);
    this.setState({
        confirmContent: '确定更改了'
    })
}

 

这样两步做的目的就是减少出错,不会发生this指向问题.

 

如果要是这样使用需要在constructor里面绑定一下this的指向

<Button onClick={this.cancel}>取消</Button>

cancel() {
    this.setState({
        confirmContent: '取消了,更改回来'
    })
}

constructor() {
    super();
    this.state = {
        confirmContent: '这个是点击确认要更改的内容',
    }
    this.cancel = this.cancel.bind(this);
}

9.文本值双向绑定

即:react中不像vue中一样可以内部实现双向绑定,在react实现双向绑定的任务交给工程师.

在onchange中获取文本框的值的时候有两种方案

①.使用event.target.value

   注意使用箭头函数的时候,要将event传到箭头函数里面即 (event) => {this.func()},此时target中的value值打印出来是看不到的,直接使用就可以

②.使用类似vue中ref的方式来获取文本框中的值:

在React中使用this.refs.[name]来获取对应的value值.(vue中使用this.$refs[name]来获取)

例如 <input ref='inputEvent'/>

使用this.refs.inputEvent 来获取对应的数据

 changeHandel = (event) => {
        // console.log(event);
        let targetValue = event.target.value; //或者
        let tarValue = this.refs.inputVal.value;
        this.setState({ //此函数接收变化并更新虚拟dom
            inputVal: tarValue
        })
    }

    render() {
        return <div>
            <div>{this.state.inputVal}</div>
            <input type="text" className="form-control"
                   value={this.state.inputVal}
                   onChange={(event) => this.changeHandel(event)}
                   ref="inputVal"
            />
            {/*此时input必须绑定readOnly 或者onchange事件 要不然会报错*/}
            <Button className="btn-success" onClick={() => this.confirm('click')}>更改</Button>
            <Button className="btn  btn-danger" onClick={() => this.cancel()}>取消</Button>
        </div>
    }