最后更多分享：前端字节跳动真题解析
配置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) =>{
console.log('show方法被调用了！'+arg1);
this.setState({
//在 setState 中，只会把对应的 state 状态更新
msg:'123'+arg1
}})
}
注意：this.setState 方法的执行是异步的，调用完this.setState之后，又想立刻拿到state值，需要使用this.setState({},callback)
show = (arg1) =>{
console.log('show方法被调用了！'+arg1);
this.setState({
msg:'123'+arg1
},function(){ //回调
console.log('this.state.msg');
})
//注意：this.setState 方法的执行是异步的
//调用完this.setState之后，又想立刻拿到state值，需要使用this.setState({},callback)
}
二、React中绑定文本框与State中的值
----------------------
默认情况下，在React中，如果页面上的表单元素，绑定了state上的状态值,那么，每当state 上状态值变化。必然会自动把最新的状态值，自动同步到页面上;状态变化->自动更新页面(单向数据流)如果，UI页面上，文本框的内容变化了，想要把最新的值，同步回state中去，此时, React没有这种自动同步机制;
如果我们只是把文本框的value属性绑定到了state状态，但是如果不提供 onChange 或 readOnly 处理函数的话，得到的文本框将会是一个只读的文本框
<input type="text" style={{width:'100%'}} value={this.state.msg} />
当为文本框绑定 value 值以后，要么同时提供一个readOnly,要么提供一个onChange处理函数
> 1.在React中，需要程序员，手动监听文本框的 onChange 事件; 2.在 onChange事件中，拿到最新的文本框的值; 3.程序员调用this.setstate({})手动把最新的值同步到state中；
在 onChange 事件中，获取文本框的值有两种方案
### 方案1 通过事件参数 e 来获取
render(){
return <div>
<button onClick={ () => this.show('我知道了')}>按钮</button>
<input type="text" style={{width:'100%'}} value={this.state.msg} onChange={ (e)=>this.txtChanged(e)} />
</div>
}
// 每当文本框的内容变化了，必然会调用这个 txtChanged
txtChanged = (e)=>{
// console.log('变化了');
console.log(e.target.value);
}
### 文末
如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。
同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。
这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。
**269页《前端大厂面试宝典》**
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)**
**前端面试题汇总**
**JavaScript**
