共计 4072 个字符，预计需要花费 11 分钟才能阅读完成。
web 前端三大支流框架
1、Angular
大家眼里比拟牛的框架，甚至有人说三大框架中只有它能称的上一个残缺的框架，因为它蕴含的货色比较完善，蕴含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有性能。对于刚开始学习应用框架的小伙伴们，能够举荐这个框架，学会之后几乎能颠覆之前你对前端开发的认知。应用 TypeScript 可能进步代码可维护性，有利于前期重构。双向数据流很不便，然而等业务简单之后，你可能就搞不清楚数据流了。还有令人不开心的脏值查看，以及 directive 的封装并没有解决视图与数据关系齐全拆散，有时候还要用 $digist 强制触发检测。
2、React（也是接下来要讲的）
这个框架自身比拟容易了解，它的构造很清晰，就是由十几个 API 组成，而后异步渲染，咱们只须要解决好接口和保护就好了，然而很多人反映上手还是有肯定的的难度的。React 是单向数据流，代码写起来会较双向数据流的多一些，然而同样的排查问题时思路清晰很多。
3、Vue
号称是最简略，最容易上手的框架，同时也是行内的大趋势，还能够用来开发最火的小程序。毕竟用这神器，代码码的飞快，我的项目也能疾速上线。同时他也是双向数据流。有些人认为 Vue 是 Angular 和 React 的联合，既有 Angular 的模板语法也有 React 的组件化体系。
React 简介
React 起源于 Facebook 外部我的项目，用来架设 Instagram 网站，并于 2013 年 5 月开源。React 领有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和应用它。
1、React 次要的原理
Virtual DOM 虚构 DOM；传统的 web 利用，操作 DOM 个别是间接更新操作的，DOM 更新通常是比拟低廉的。而 React 为了尽可能减少对 DOM 的操作，提供了一种不同的而又弱小的形式来更新 DOM，代替间接的 DOM 操作。就是 Virtual DOM, 一个轻量级的虚构的 DOM，就是 React 形象进去的一个对象，形容 DOM 应该什么样子的，应该如何出现。通过这个 Virtual DOM 去更新实在的 DOM，由这个 Virtual DOM 治理实在 DOM 的更新。React 有个 diff 算法，更新 Virtual DOM 并不保障马上影响实在的 DOM，React 会等到事件循环完结，而后利用这个 diff 算法，通过以后新的 dom 表述与之前的作比拟，计算出最小的步骤更新实在的 DOM。2、应用 React 利用脚手架 create-react-app
开箱即用装置 Node.js 环境 npm install -g create-react-appcreate-react-app demo-appcd demo-appnpm start
package.json 阐明
scripts”scripts”:{
“start”:”react-scripts start”,// 开始运行我的项目
“build”:”react-scripts build”,// 生成环境构建
“test”:”react-scripts test”,// 测试用例
“eject”:”react-scripts eject”// 自定义 webpack 配置
},
dependencies React 运行所需依赖 ”dependencies”:{
…
“react”:”^17.0.1″,
“react-dom”:”^17.0.1″,
“react-scripts”:”4.0.3″
…
},
3、运行我的项目 npm start，我的项目默认在 3000 端口
4、React JSX 语法
应用 ReactDOM.render 进行渲染 constelement=<div> 这是一个元素 </div>;
ReactDOM.render(element,document.getElementById(“app”));
能够通过 jsx 定义 html 元素，render 函数进行渲染。留神：在渲染的更节点只容许一个元素存在，不然会报错，不能失常渲染。设置款式时不能用 class 设置，用 className 进行设置。应用 style, 须要应用大写 conststyleName={marginLeft:10};
constelement=<divstyle={styleName}> 测试利用 </div>;
ReactDOM.render(element,document.getElementById(“app”));
定义事件，React 事件和原生 html + js 定义事件始终，React 定义事件须要大写，驼峰命名 constelement=(
<div>
<p
onClick={()=>{
console.log(“ 点击事件 ”);
}}
事件定义
</p>
</div>);
ReactDOM.render(element,document.getElementById(“app”));
简略表达式 constelement=<div>{1+1}</div>;
ReactDOM.render(element,document.getElementById(“app”));
constelement=<h1>{index==1?” 显示 ”:” 不显示 ”}</h1>;
ReactDOM.render(element,document.getElementById(“app”));
正文
5、React 组件化
在 react 中，所有皆组件，依据划分不同组件，能够使代码复用，缩小代码编写定义组件分 ES6 和 函数组件 ES6 class 形式定义须要继承 React.Component，实现 render 函数，返回一个元素 classClassComponentextendsReact.Component{
render(){
return<div> 是一个 Class 组件 </div>;
}
}
函数组件 constFunctionComponent=()=><div> 是一个 Function 组件 </div>;
浏览器查看成果
6、React state & props
state 在 react 组件中能够保留以后所操作数据状态 props 能够通过父子组件进行数据传递和交互应用 ES6 组件形式应用 stateclassClassComponentextendsReact.Component{
state={
count:0,
};
handleAdd=()=>{
const{count}=this.state;
this.setState({count:count+1});
};
handleReduce=()=>{
const{count}=this.state;
this.setState({count:count-1});
};
render(){
const{count}=this.state;
return(
<div>
<p>Class 组件 </p>
<p> 点前计数 {count}</p>
<buttononClick={this.handleAdd}> 加 </button>
<buttononClick={this.handleReduce}> 减 </button>
</div>
);
}
}
应用 函数 组件形式应用 state 函数组件操作 state 能够应用 hooks 操作 hooks 函数为 React 16.8 引入新 API，不便解决传统 React 形式操作数据 importReact,{useState}from”react”;
constFunctionComponent=()=>{
const[count,setCount]=useState(0);
consthandleAdd=()=>{
setCount(count+1);
};
consthandleReduce=()=>{
setCount(count-1);
};
return(
<div>
<p>Function 组件 </p>
<p> 点前计数 {count}</p>
<buttononClick={handleAdd}> 加 </button>
<buttononClick={handleReduce}> 减 </button>
</div>
);
};
7、props 应用
定义 constApp=()=>{
return(
<divclassName=”App”>
<ClassComponenttitle=”Class Props Title”/>
<FunctionComponenttitle=”Function Props Title”/>
</div>
);
};
exportdefaultApp;
接管，应用 Class 组件
Function 组件
成果
8、React 生命周期
16.x 和 17.x 版本，对应生命周期函数有所变动被打横线生命周期函数在 React 17.x 版本已被移除，不倡议应用
罕用生命周期函数 // 组件被挂载
componentDidMount(){}
// 产生异样
componentDidCatch(){}
// 组件从新渲染 组件状态 || 属性扭转
componentDidUpdate(){}
// 判断组件是否应该从新渲染，默认 true
shouldComponentUpdate(nextProps,nextState){}
// 组件将被卸载
componentWillUnmount(){}
componentDidMount 数据加载，网络申请 componentDidCatch 捕捉异样，上报 shouldComponentUpdate 组件发生变化，须要从新调整逻辑，从新渲染组件 componentWillUnmount 革除资源，比方定时器，避免内存泄露 9、hooks useEffect
useEffect(()=>{
// did mount
// ajax request
return()=>{
// un mount
// clear resource
};
// 当 value 发生变化，从新触发
},[value]);
总结可能正确应用 React 生命周期函数和 state & props，事件定义。能够解决大部分 React 我的项目开发。
好啦，这次就为大家分享这些了，更多前端学习资源，欢送关注咱们~
宝宝起名 - 更懂年老父母的起名参谋