【⿊马程序员】react学习笔记
DOM 浏览器中的概念 ⽤JS对象表⽰页⾯中的元素并提供操作对象的api
虚拟DOM 框架中的概念 ⽤JS对象模拟页⾯上的DOM和DOM嵌套，主要⽬的是实现页⾯上元素的⾼效更新
Diff算法 ：tree diff, component diff, element diff
webpack :
快速初始化项⽬： npm init -y
新建⽬录： dist 产品⽬录 src 源代码路径
在src⽬录下创建index.html,main.js⽂件
使⽤cnpm安装webpack，运⾏ cnpm i webpack webpack-cli -D
在 package.json ⽂件⾥⾯的【devDependencies】和【dependencies】对象有什么区别呢？
devDependencies ⾥⾯的插件只⽤于开发环境，不⽤于⽣产环境，⽽ dependencies 是需要发布到⽣产环境的。
在 package.json ⽂件⾥⾯提现出来的区别就是，使⽤ --save-dev 安装的 插件，被写⼊到 devDependencies 对象⾥⾯去，⽽使⽤--save 安装的插件，责被写⼊到 dependencies 对象⾥⾯去。
npm i module_name -S = > npm install module_name --save 写⼊到 dependencies 对象 -S就是–save的简写
npm i module_name -D => npm install module_name --save-dev 写⼊到 devDependencies 对象
npm i module_name -g 全局安装 i 是install 的简写
实时打包⼯具： cnpm i webpack-dev-server -D 在scripts中配置dev 为 webpack-dev-server ，当我们运⾏npm run dev时会⾃动寻webpack-dev-server
注意: webpack-dev-server打包好的js⽂件是托管到内存中的，所以在项⽬的⽬录中看不见。
react安装：
npm i react react-dom -S
react: 专门⽤来创建组件和虚拟DOM的
react-dom: 专门进⾏DOM操作的
const myh1 = ateElement(‘h1’, {id: ‘mh1’, title:‘this is a div’}, ‘这是⼀个⼤⼤的h1’);
const myhdiv = ateElement(‘h1’, {id: ‘mh1’, title:‘this is a div’}, myh1);
由于上述的⽅式过于⿇烦，我们通过jsx（在html中混合写⼊js的语法）的⽅式来解决这个问题，babel会把jsx转换成createElement形式来执⾏
const mydiv = <div id = "mydiv" title="div aaa">这是⼀个div元素</div>
babel配置
安abel插件：
cnpm i bable-core babel-loader babel-plugin-transform-runtime -D
cnpm i bable-preset-env babel-preset-stage-0 babel-preset-react -D
由于webpack只能打包处理.js后缀名的⽂件，像.png .vue ⽆法主动处理，所以要配置第三⽅的loader; 在module，rules中进⾏以下配置：
test: /.js|jsx$/, use: ‘babel-loader’, exclude:/node_modules/
在项⽬根⽬录创建.babelrc⽂件
{
“presets”:[“env”, “stage-0”, “react”],
“plugins”:[“transform-runtime”]
}
.map的⽅式可以⽤来展开数组，如果箭头函数右边只有⼀⾏代码，可以⼲掉花括号和return
js加分号的情况：
下⼀⾏的开头是| ( + - /这五个符号之⼀的，必须要加分号。
for循环都要加⼊key，不然在dom元素变换的时候会混乱
jsx中元素添加类名，需要⽤className来代替class，htmlFor来替代label的for属性
如果在⼀个组件中return⼀个null则表⽰此组件什么都不渲染
可以⽤...props来进⾏属性的传递
组件的名称⾸字母必须是⼤写的
可以进⾏webpack配置进⾏⽂件的后缀名省略，按照配置的顺序补全
也可以进⾏根⽬录的配置，这样在项⽬中就可以直接⽤@符号表⽰跟⽬录中src的⼀层路径，这样在组件导⼊的时候就不会出现问题
resolve: {
extensions: ['.js', 'jsx', '.json'],
alias: {'@': path.join(__dirname, './src')}
}
class关键字创建组件
ES6中class关键字是⾯向对象的新形式
通过实例访问到的属性叫实例属性，通过构造函数直接访问到的属性叫做静态属性
静态属性和静态⽅法都需要static关键字进⾏区分
如果⼀个⼦类通过extends关键字继承了⽗类，那么在⼦类的constructor中必须要调⽤⼀下super()
super() 是⼀个函数，⽽且是⽗类的构造器，⼦类中的super其实是⽗类中的构造器的引⽤
语法规范：在⼦类中this必须放在super之后
基本组件结构语法：
class组件名称extends React.Component {
render(){
return<div>这是class创建的组件</div>
}
}
props区别：在function创建的组件中要进⾏props的接收，在class创建的组件中则不⽤，我们直接通过this.props来调⽤就可以了
两种创建组件⽅式的对⽐：
class 创建组件有⾃⼰的私有数据和⽣命周期，但是⽤function创建的组件，只有props，没有⾃⼰的私有数据和⽣命周期
class创建的组件叫有状态组件（有state)，普通的function函数创建的组件叫⽆状态组件(⽆state )
所以很好得到结论，如果⼀个组件需要有⾃⼰的私有数据，则推荐有状态组件；⽆状态组件由于没有
⾃⼰的私有数据和⽣命周期，运⾏效率会⽐较⾼。
props和state的区别
props中的数据都是外界传过来的
state中的数据都是组件私有的（通过ajax获取回来的数据，⼀般都是私有数据）
props中的数据都是只读的，不能重新赋值
state中的数据都是可读可写的。
css配置
cnpm i style-loader css-loader -D
在rules中进⾏下⾯配置：
{test: /.css$/, use:[‘style-loader’, ‘css-loader’]}
注意：在上⾯的配置中，对于处理，先会⽤css-loader进⾏处理，然后会把结果交给style-loader进⾏处理，直到不到前⼀个loader，再把打包后的结果交给webpack来进⾏处理。
为了使得css只在⼀个模块⾥⾯起作⽤，我们重新配置rules：
{test: /.css$/, use:[‘style-loader’, ‘css-loader?modules’]}
在启⽤模块化以后，import接收的不再是空对象了，⽽是⼀个有具体属性的对象。
css模块化只针对类选择器和id选择器⽣效，对于标签选择器则不会模块化。
使⽤loacalIdentName可以⾃定义⽣成的类名格式，可选的参数有：
[path] 表⽰样式表相对于项⽬根⽬录所在路径
[name]表⽰样式表⽂件名称
[local]表⽰样式的类名定义名称
[hash:length]表⽰length位的哈希值
被:global()包裹起来的类名不会被模块化，⽽是会全局⽣效。
被:local()包裹起来的类名会被模块化，即默认情况下的操作。
如果在引⽤某个包的时候 这个包被安装到了node_modules⽬录中，则可以省略node_modules这⼀层⽬录直接以包名开始引⼊⾃⼰的模块或样式表
打包处理字体⽂件的loader
cnpm i url-loader -D
{test:/.ttf|woff|woff2|eot|svg$/, use: ‘url-loader’},
考虑到对node_modules⾥⾯的配置的排除，规定第三⽅的样式表都以.css结尾，⾃⼰的样式表都要以.scss或.less结尾，只⽤.scss
或.less启⽤模块化
cnpm i sass-loader node-sass -D
{test： /.scss$/, use:[‘style-loader’, ‘css-loader?modules’,‘sass-loader’]}
绑定事件
react中名称的⾸字母必须要⼤写 onClick、onMouseOver
事件的处理函数必须是以下的格式：
onClick = { function }
react中修改状态值
this.setState
黑马程序员前端全套视频
注释折叠
//#region
//#end
react是单项绑定的，vue通过v-model实现双向绑定，所以react需要定义onchange函数，或者提供⼀个read-only属性通过 或 e.target 的⽅式获取元素的value值

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。