react知识点总结，持续更新。。。
一、webpack
1、 什么是以及为什么要使用webpack
现在的网页功能越来越丰富，所需要的JavaScript和模块也会很多，为开发更加简洁，出现了以下方法，如模块化，scss，typescript等。 但有些语法是浏览器无法识别的。所以需要用到webpack。 WebPack是模块打包器，它会将浏览器不能支持不能识别的语言语法，打包转换成浏览器可识别的语法，如（Scss，TypeScript等）。
2、 webpack 与 gulp 的区别
两者并无太多的可比性 1、webpack是为模块化提供解决方案； 2、gulp是前端自动化构建工具。
3、如何使用webpack
1、全局安装webpack
cnpm install webpack@3.5.3 -g
2、创建文件夹 初始化文件夹
npm init -y
3、局部安装webpack
cnpm install webpack@3.5.3 --save-dev
4、创建 webpack.config.js
5、创建 src dist 文件夹
6、处理css的loader
cnpm install --save-dev style-loader css-loader sass-loader node-sass
7、处理js的loader
cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react
8、插件
cnpm install html-webpack-plugin --save-dev;
9、热更新 服务器
cnpm install webpack-dev-server@2 --save-dev;
10、配置package.json 中的 script
"dev":"webpack-dev-server --open",
11、运行打包
webpack4、配置webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const PATH = {
app:path.join(__dirname,"./src/index.js"),
build:path.join(__dirname,"./dist")
}
//下面的代码都是 webpack的配置项
module.exports = {
entry:{
app:PATH.app
},
output:{
filename:"[name].js",//app.js
path:PATH.build
},
//做模块的处理 用loader进行处理
module: {
rules:[
{
test:/\.js$/,
use:{
loader:"babel-loader",
options:{
presets:["@babel/env","@babel/react"]
}
}
},
{
test:/\.(css|scss)$/,
use:["style-loader","css-loader","sass-loader"]//loader的执行顺序是从下至上 从右至左
}
]
},
plugins:[
new HtmlWebpackPlugin({
filename:"index.html",
template:"./index.html",
})
]
}------------------------------------------------华-丽-webpack-割-线--------------------------------------------------------------------
-------------------------------------------------华-丽-react-割-线-----------------------------------------------------------------------
二、react
1、react起源
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
2、特点
1.声明式设计 −React采用声明式，可以轻松描述应用。 2.高效 −React通过对DOM的模拟（虚拟DOM），最大限度地减少与DOM的交互。 3.灵活 −React可以与已知的库或框架很好地配合。 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
3、react 与vue 相同与区别
react:约束性比较小 灵活度比较高 (没有指令) 语法jsx语法
vue：约束性比较大 灵活度比较低 vue速度快 templates
React 和 Vue 有许多相似之处，它们都有：
* 使用 Virtual DOM
* 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
* 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。
https://cn.vuejs.org/v2/guide/comparison.html#React
React 还是 Vue: 你应该选择哪一个Web前端框架？
如果你喜欢用（或希望能够用）模板搭建应用，请使用Vue
如果你喜欢简单和“能用就行”的东西，请使用Vue
如果你的应用需要尽可能的小和快，请使用Vue
如果你计划构建一个大型应用程序，请使用React
如果你想要一个同时适用于Web端和原生App的框架，请选择React
如果你想要最大的生态圈，请使用React
如果你已经对其中一个用得满意了，就没有必要换了
https://blog.csdn.net/yzh_2017/article/details/549091664、 函数化编程及优点
纯函数的定义是，对于相同的输入，永远会得到相同的输出
https://zhuanlan.zhihu.com/p/21714695
函数式编程好处：
代码简洁，开发快速
接近自然语言，易于理解
更方便的代码管理
易于"并发编程“
代码的热升级5、react基本语法
import React from "react";
import ReactDom from "react-dom";
ReactDom.render(
Dom, //组件时为<App/>
document.querySelector('#root'),
()=>{
console.log("渲染完成")
}
)
参数1：需要渲染的组件或者虚拟DOM
参数2：将渲染好的组件或者虚拟DOM放在哪个标签上
参数3：回调函数6、组件，以App.js为例
import React ,{Component,Fragment} from "react";
//constructor 初始化函数 可以用来存放当前组件所需要的一些状态
//Component:所有组件的父类
//在react当中所有的组件创建的时候必须首字母大写， 为了区分Element元素和组件的区别
class App extends Component{
constructor(){
//super必须要写
super();
this.state = {
message:"wppp"
}
}
render(){
let {message} = this.state;
return (
//Fragment作用当做节点标签使用 但是不会被渲染成标签
<Fragment>
//事件与原生相同，注意用bind改变this指向App，（注：bind有返回值）
//react中的函数不用加()
<div onClick={this.handleClick.bind(this)}>{message}</div>
</Fragment>
)
}
handleClick(){
//react中如果需要改变this.state里面的数据 需要用this.setState方法 当前方法是异步的方法
// 用法为：
// 参数1：对象 修改数据 //key:需要修改的状态 : val:值
// 参数2：回调 验证数据是否修改成功 同时可以获取到最新的DOM结构
this.setState({
key:val
},()=>{})
this.setState({
message:"1234"
})
}
}
export default App;7、生命周期函数
constructor:
初始化生命周期函数
当前函数调用的时候必须掉用super方法，否则会报错 this的指向也会发生问题
当前函数中可以用来定义当前组件所需要的状态 ，通过this.state
如果当前生命周期函数中不传props的话，是访问不到外部属性的
如果在当前生命周期函数中和super中传递了props那么就能访问到外部属性
componentWillMount：
挂载前:
constructor执行完毕以后就会执行当前生命周期函数，当前生命周期函数中可以接受到外部属性 可以将外部属性转换为内部属性
在挂载之前是访问不到真正的DOM元素的
render:
1、作用：渲染虚拟DOM
2、特点：当rander渲染虚拟Dom的时候会将数据和虚拟Dom进行相结合生成真实的DOM结构，会将当前的虚拟DOm在缓存中保存一份，当数据发生改变的时候会将缓存中的虚拟Dom和第二次改变的虚拟Dom进行对比。修改需要改变的虚拟DOM节点 而不是改变所有的虚拟Dom diff算法
3、render函数什么时候会执行？
当this.state的状态发生改变的时候render函数就会执行在表单当中如果设置了value值 那么就必须设置onchange方法 如果不需要事件的情况下 我们可以给当前元素设置一个defaultValue；在react中我们可以使用事件对象8、组件传值
父传子
在子组件标签内部用自定义属性进行传递 接受的时候通过this.porps进行接受
如
父组件中：<One val={message}></One>
子组件中：let {val} = this.props
子传父
在子组件标签内部用定义属性定义一个方法传递给子组件 子组件内部调用这个方法传递参数
如：
父组件中：<One send={this.handleSend.bind(this)}></One> 然后调用handleSend(val){ this.setState({ oneVal:val }) } 进行父组件值得修改
子组件中：this.props.send(this.state.email) ——可通过事件传递（如onclick等）
注：this.props是用来接受外部属性的
非父子组件传值
手动封装 $on $emit $off
传值的一方调用$emit 接受值的一方调用$on
如：
传值组件中：Observer.$emit("handle",this.state.oneVal) ——可通过事件传递（如onclick等）
接收组件中：constructor中
Observer.$on("handle",(val)=>{
this.setState({
oneval:val
})
})9、定义外部默认状态
定义外部默认状态（） 如：
组件名称.defaultProps = { One.defaultProps = {
key:val val:"123"
} }10、限制外部属性的类型
限制外部属性的类型
1、下载第三方包
cnpm install prop-types --save-dev
2、引入 import PropTypes from "prop-types";
3、校验
如
组件名称.propTypes = { One.propTypes = {
key:PropTypes.类型 val:PropTypes.number
} }
还包括：
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,11、
- 上一篇 »HTML+CSS知识点总结
- 下一篇 »PHP知识点总结4
