preact？有的人为什么喜欢用React
这篇文章给大家聊聊关于preact，以及有的人为什么喜欢用React对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。
有的人为什么喜欢用React
一个 React组件可以简单地被认为是返回元素的函数（或者至少有一个具有这样的功能的类）。这种功能性方法对于 Javascript开发人员是非常自然的。传入数据，得到元素。如果你有一堆内容在数组当中，你可以简单地将它们遍历出一系列元素。如果你想排除这些项目中的某一些元素，你可以使用 Array数组对象中的 filter方法和 map方法去处理元素并且得到结果。这个功能性工作流程完美地反映了您对应用程序的其他部分的理解。这种方法是对Javascript的优势的补充。一个 Vue组件更像是一个能够从数据结构当中引用数据的模板。它包含了一个 DSL（Domain specific language），虽然是次要的，但是显然是完全没有必要的。我**不需要** v-for因为我可以使用 map()。我**不需要** v-if因为我可以使用普通的老旧的 if。模板至少会带来一定程度的有限或无益的认知压力。模板还引入了作用域的问题。如果我将一些静态数据导入到我的 React组件中，我可以在我的渲染函数中使用它，因为**所有标准的 JavaScript作用域规则都应用于此**。它只是一个函数，与其他任何函数完全一样。 Vue的模板与 Javascript的单独作用域相互作用，因此您必须将该静态数据写到 Vue组件中，并将其作为计算属性字段返回。这些东西都不是特别痛苦，但都是不必要的。
React高阶组件应如何使用
这次给大家带来React高阶组件应如何使用，React高阶组件使用的注意事项有哪些，下面就是实战案例，一起来看一下。
前段时间在工作中写Hybrid页面时遇到了这样的一个场景，公司需要一系列的活动组件，在每个组件注册的时候都需要调用App端提供的一个接口。一开始也考虑了几种方式，包括mixin、组件继承以及react高阶组件。但经过了种种衡量，最后选择使用了高阶组件的做法。
那什么是高级组件？首先你得先了解请求ES6中的class只是语法糖，本质还是原型继承。能够更好的进行说明，我们将不会修改组件的代码。而是通过提供一些能够包裹组件的组件，并通过一些额外的功能来增强组件。这样的组件我们称之为高阶组件（Higher-Order Component）。
1、Mixins的缺点
React官方已不推荐使用Mixins的技术来实现代码的重用，Mixins技术有一系列的缺点，首先Mixins会造成命名冲突，我们通过以下的方式来注入Mixins：
var myMixins= require('myMixins');
var Button= React.createClass({
mixins: [myMixins],
//...
})如果你需要注入多个mixins,其中一个是自己的，另外的可能是第三方的。那有可能在两个mixins里使用了相同名称的方法，这会使得其中的一个不起作用，而你能做的只有修改其中一个方法的名称。另一方面，一个mixins一开始可能是非常简单的，仅仅需要实现某一个功能，但当业务越加的复杂，需要往其中加入更多的方法的时候，就会变得非常复杂。要深入了解mixins的缺点，可以查看官方博客。
2、组件继承
对于我自己来说这种方法以前使用的比较多，先创建一个BaseComponent，在其中实现一系列公共的方法，其后的每个组件都继承于这个组件，但缺点是不够灵活，在基础组件中只能实现一些比较固定的方法，而对于每个组件的定制化会有很大的限制。
3、React高阶组件
由于mixins的一系列缺点，React官方也意识到使用mixins所带来的痛点远远高于技术本身产生的优点，而高阶组件便可以代替mixins，而且当深入之后它还有着更加丰富的用法。
高阶组件（HOC）是React中对组件逻辑进行重用的高级技术。但高阶组件本身并不是React API。它只是一种模式，这种模式是由React自身的组合性质必然产生的。
高阶函数
说到高阶组件，就先得说到高阶函数了，高阶函数是至少满足下列条件的函数：
1、接受一个或多个函数作为输入
2、输出一个函数
在javascript这门函数为一等公民的语言中，高阶函数的使用还是非常之多的，像我们平时的回调函数等等，都用到了高阶函数的知识。我们先来看一个简单的高阶函数
var fun= function(x, y){
return x+ y;
}fun是一个函数，下面我们将整个函数作为参数传递给另一个函数
var comp= function(x, y, f){
return f(x,y);
}验证一下
comp(1,2,fun)// 3高阶组件定义
类比高阶函数的定义，高阶组件就是接受一个组件作为参数，在函数中对组件做一系列的处理，随后返回一个新的组件作为返回值。
我们先定义一个高阶组件BaseActivity
const BaseActivity=(WrappedComponent)=>{
return class extends Component{
render(){
return(
<section>
<p>我的包裹组件</p>
<WrappedComponent/>
</section>
)
}
}
}组件接受一个被包裹的组件作为参数，返回了一个经过处理的匿名组件。
在其他组件中使用这个高阶组件
class Example extends React.PureComponent{
constructor(props){
super(props);
this.state={
width:'100%',
height:'100%'
}
}
componentWillMount(){
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))){
return;
} else{
this.setState({
width:'375px',
height:'640px'
})
}
}
render(){
let{ width, height}= this.state;
return(
<p className="activity">
<p className="activity-content" style={{ width, height}}>
<button className="btn">参加活动</button>
</p>
</p>
)
}
}
export default BaseActivity(Example);具体用法就是在export组件的时候，使用BaseActivity函数来包裹这个组件，看下输出的react dom内容
在Example组件外面包裹了一个匿名组件。
参数
既然高阶组件是一个函数，我们就可以向里面传递我们需要的参数
const BaseActivity=(WrappedComponent, title)=>{
return class extends Component{
render(){
return(
<section>
<p>{title}</p>
<WrappedComponent/>
</section>
)
}
}
}在Example中这样export
export default BaseActivity(Example,'这是高阶组件的参数');我们看下输出的react dom
可以看到参数已经传递进去了。
当然还可以这样用(柯里化)
const BaseActivity(title)=>(WrappedComponent)=>{
return class extends Component{
render(){
return(
<section>
<p>{title}</p>
<WrappedComponent/>
</section>
)
}
}
}在Example中这样export
export default BaseActivity('这是高阶组件的参数')(Example);这种用法在ant-design的表单以及redux的connect中我们都可以看到
// ant
const WrappedDemo= Form.create()(Demo)
// redux
export default connect(mapStateToProps, mapDispatchToProps)(Counter)高阶组件还可以扩展原组件的props属性，如下所示：
const BaseActivity(title)=>(WrappedComponent)=>{
return class extends Component{
render(){
const newProps={
id: Math.random().toString(8)
}
return(
<section>
<p>{title}</p>
<WrappedComponent{...this.props}{...newProps}/>
</section>
)
}
}
}看下输出的react dom
高阶组件的缺点
高阶组件也有一系列的缺点，首先是被包裹组件的静态方法会消失，这其实也是很好理解的，我们将组件当做参数传入函数中，返回的已经不是原来的组件，而是一个新的组件，原来的静态方法自然就不存在了。如果需要保留，我们可以手动将原组件的方法拷贝给新的组件，或者使用hoist-non-react-statics之类的库来进行拷贝。
结语
高阶函数对于初学者来说可能不太好理解，但当你深入其中，了解其中的原理之后，我们可以使用高阶函数来完成很多的工作。
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
通过jQuery编码转换、事件响应、页面跳转实现浏览器跳转并传递参数
js获取ModelAndView后如何使用
如何评价React
个人意见，觉得R16最重要的是 MIT license（非技术层面），然后就是服务器渲染，感觉以前的整个服务器端渲染的实现在react里的地位，就是个小婢女，R16后应该可以是个小妾了，可以正式用用了（不过事实上不少大的网站已经在用了，网易严选，pinterest.com，知乎应该也是）。其它一些开发友好的改进也是不错地，而Fiber的出现让我们有更多的期待。MIT license,这个沸沸扬扬了好一阵，如果再不改，可能React会给更多的大公司放弃，也带了一个坏榜样给open source。其实facebook做得比不是太差，只是可能没想到React那么成功。如果再去掉原来的BSD+Patents,很多人的态度恐怕就是“我能理解你，但我还是得放弃你“，现在facebook终于开了个好头，大家也多支持支持吧。不过不知道reactnative有没希望
OK，关于preact和有的人为什么喜欢用React的内容到此结束了，希望对大家有所帮助。