Web前端最全React技术栈 --》文件模块化和按钮绑定事件 ## Day5(2)，2024年最新社招面试应该问什么问题

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

---

前期回顾：React技术栈 --》组件对比和评论列表案例 ## Day4_亦世凡华、的博客-优快云博客

一、为scss和less文件启用模块化

===================

我们在项目中可能会用到bootstrap( 抽空我会单独再分出一个专栏专门讲解 )这样的第三方样式表今天我们使用一下，因为bootstrap版本已经更新的4+了，对于不熟悉的人今天我们使用3+版本

新建终端输入： cnpm i bootstrap@3.3.7 -S

文件引入node_modules成功，注意：如果在引用某个包的时候这个包被安装到了node_modules 目录中，则可以省略node_modules这一层目录，直接以包名开始引入自己的 模块 或 样式表。

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

这里提一句，在开发过程中可能会遇到字体图标后缀名的问题，像 .ttf、.woff、.eot等现在解决。

新建终端输入如下命令

cnpm i url-loader -D

cnpm i file-loader@* -D

配置webpack.config,js文件

我们要了解一点：什么情况下我们要启用模块化？自己写的样式是要启用模块化的；像第三方的样式，由于已经是现成的样式表了，我们就没必要在为其启用模块化了，那么我们如何区别自己写的样式和第三方样式，来避免冲突呢？这就讲到了 .scss 和 .less 了

自己规定：第三方的样式表，都是以 .css 结尾，这样我们不用为普通的 .css启用模块化

自己的样式表，都要以 .scss 或 .less 结尾，只为 .scss 或 .less 文件启用模块化

在css之前加了个s，我们可以理解为超级的css(supercss即scss),普通的css不能进行嵌套但像scss和less是可以进行嵌套的。

因为直接引用scss是不能被编译器处理的，所以我们要进行安装相关的loader来解析 .scss 文件

cnpm i sass-loader node-sass -D

安装完成之后配置webpack.config.js

{

    test: /\.scss$/, //打包处理 scss 文件的loader

    use: [

        {

            loader: 'style-loader'

        },

        {

            loader: 'css-loader',

            options: {

                importLoaders: 1,

                modules: {

                    localIdentName: '[path][name]-[local]-[hash:5]'

                }

            }

        },

        {

            loader:'sass-loader'

        },

    ]

},

因为我们是要为 .scss启用模块化的，所以之前设置的 .css设置的模块化可以删除了

{

    test: /\.css$/, //打包处理 css 样式表的第三方loader

    use: [

        {

            loader: 'style-loader'

        },

        {

            loader: 'css-loader',

        }

    ]

},

配置成功后，验证将我们自己创建的css文件修改为scss文件，看看编译器是否执行

执行成功！！！，这里插一句，补充上文的遗漏

/* 注意：被:loacl()包裹起来的类名，会被模块化；默认情况下，所有的类名和ID，都被模块化了 */

.title{

    color: red;

    text-align: center;

    font-weight: 200;



}

/* 被:global()包裹起来的类名，不会被模块化，而是会全局生效 */

:global(.test){

     font-style: italic;

}

OK，React中 css 美化样式就暂时讲到这了。

二、React中按钮绑定事件

==============

一、使用this.setState修改state上的数据

---

1.事件的名称都是React提供的，因此名称的首字母必须是大写onclick、onMouseOver

2.事件提供的处理函数，必须是如下格式

onClick={ function }

3.通常为了代码的方便书写，我们一般会把点击事件的函数抽离出来。单独书写，注意：在函数内部调用函数内的实例方法，要用 this.方法名 。

注意：onClick只接受function作为处理函数；箭头函数，本身就是一个匿名的 function 函数

render(){

    return <div>

        <button onClick={ () => this.show('我知道了')}>按钮</button>

        <h3>{this.state.msg}</h3>

    </div>

}



show = (arg1) =>{

    console.log('show方法被调用了！'+arg1);

}

注意：在React中如果想为state中的数据重新赋值，不要使用 this.state.**** = 值，应该调用 React 提供的 this.setState({msg:‘123’})，例如：

export default class BindEvent extends React.Component{

    constructor () {

        super()

        // 私有数据

        this.state = {

            msg:'哈哈哈'

        }

    }



    render(){

        return <div>

            <button onClick={ () => this.show('我知道了')}>按钮</button>

            <h3>{this.state.msg}</h3>

        </div>

    }



    show = (arg1) =>{


**web浏览器中的javascript**

*   客户端javascript
*   在html里嵌入javascript
*   javascript程序的执行
*   兼容性和互用性
*   可访问性
*   安全性
*   客户端框架
*   **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/ed2c4f9602fb053965a21c047d1291e6.png)  

**window对象**

*   计时器

*   浏览器定位和导航

*   浏览历史

*   浏览器和屏幕信息

*   对话框

*   错误处理

*   作为window对象属性的文档元素

![](https://img-blog.csdnimg.cn/img_convert/81adbbfdefca6b401d7dc4e6acd9207d.png)