百度网站的建设目标,哪个网站开发小程序,浅析个人网站的设计论文,网线的制作步骤mixin
Mixin 设计模式
Mixin#xff08;混入#xff09;是一种通过扩展收集功能的方式#xff0c;它本质上是将一个对象的属性拷贝到另一个对象上面去#xff0c;可以拷贝多个属性到一个对象上#xff0c;为了解决代码复用问题。
常用的方法#xff1a;JQuery 的 exte…mixin
Mixin 设计模式
Mixin混入是一种通过扩展收集功能的方式它本质上是将一个对象的属性拷贝到另一个对象上面去可以拷贝多个属性到一个对象上为了解决代码复用问题。
常用的方法JQuery 的 extend 方法。
var LogMixin {log: function() {console.log(log);},componentDidMount: function() {console.log(in);},componentWillUnmount: function() {console.log(out);}
};var User React.createClass({mixins: [LogMixin],render: function() {return (div.../div)}
});var Goods React.createClass({mixins: [LogMixin],render: function() {return (div.../div)}
});缺点
Mixin 可能会相互依赖相互耦合不利于代码维护不同的 Mixin 中的方法可能会相互冲突现在大量使用 ES6 语法后React.createClass 已经取消这种方式也不再推荐
高阶组件HOC
高阶组件的定义 高阶组件HOC是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分它是一种基于 React 的组合特性而形成的设计模式。 (高阶组件是参数为组件返回值为新组件的函数。) 具体的意思就是 高阶组件可以看作 React 对装饰模式的一种实现高阶组件就是一个函数且该函数接受一个组件作为参数并返回一个新的组件。他会返回一个增强的 React 组件。高阶组件可以让我们的代码更具有复用性逻辑性与抽象性可以对 render 方法进行劫持也可以控制 props 与 state。
const EnhancedComponent higherOrderComponent(WrappedComponent);实现高阶组件的两种方式
属性代理 高阶组件通过被包裹的 React 组件来操作 props反向继承高阶组件继承于被包裹的 React 组件。
属性代理
import React,{Component} from react;const HOC (WrappedComponent) class WrapperComponent extends Component {state { number: 0 };btnClick () {this.setState({number: this.state.number})}render() {const newProps {btnClick: this.btnClick,number: this.state.number}return (divrere HOCWrappedComponent {...this.props} {...this.newProps} //div)}
}export default HOC;class MyComponent extends Component{//...
}export default HOC(MyComponent)这里最重要的部分是render 方法中返回的 WrappedComponent 的 React 组件这样就可以通过高阶组件来传递 props这就是属性代理。
这样组件就可以一层层地作为参数被调用原始组件就具备了高阶组件对它的修饰也保持了单个组件的封装性与易用性。参考 前端进阶面试题详细解答
特点 控制 props 我们可以在 HOC 里面对 props 进行增删查改等操作 const MouseHoc (MouseComponent, props) {props.text props.text ---I can operate props;return class extends React.Component {render() {return (div style{{ height: 100% }} onMouseMove{this.handleMouseMove}MouseComponent {...props} mouse{this.state} //div);}};
};
MouseHoc(Mouse, {text: some thing...
});通过 refs 使用引用 function refHOC(WrappedComponent) {return class extends Component {componentDidMount() {this.wapperRef.log();}render() {return (WrappedComponent{...this.props}ref{ref {this.wapperRef ref;}}/);}};
}抽象 state 渲染劫持 高阶组件可以在 render 函数中做非常多的操作从而控制原组件的渲染输出。只要改变了原组件的渲染我们都将它称之为一种渲染劫持。 function visibleHOC(WrappedComponent) {return class extends Component {render() {if (this.props.visible false) return null;return WrappedComponent {...props} /;}};
}使用其他元素包裹 WrappedCompoennt 修改 props
反向继承
const MyContainer (WrappedComponent) class extends WrappedComponent{render(){return super.render();}}这里返回的组件继承了 WrappedComponent因为被动地继承了 WrappedComponent所有的调用都会反向。
注意事项 当我们应用 HOC 去增强另一个组件时我们实际使用的组件已经不是原组件了所以我们拿不到原组件的任何静态属性我们可以在 HOC 的结尾手动拷贝他们 function proxyHOC(WrappedComponent) {class HOCComponent extends Component {render() {return WrappedComponent {...this.props} /;}}HOCComponent.staticMethod WrappedComponent.staticMethod;// ...return HOCComponent;
}2. 不要在 render 方法内创建高阶组件3. 不要改变原始组件(高阶组件就是一个没有副作用的纯函数。)4. 透传不相关的 props### 解决的问题1. 高阶组件就是一个没有副作用的纯函数各个高阶组件不会互相依赖耦合
2. 高阶组件也有可能造成冲突但我们可以在遵守约定的情况下避免这些行为
3. 高阶组件并不关心数据使用的方式和原因而被包裹的组件也不关心数据来自何处。高阶组件的增加不会为原组件增加负担### 存在的问题1. HOC 需要在原组件上进行包裹或者嵌套如果大量使用 HOC将会产生非常多的嵌套这让调试变得非常困难
2. HOC 可以劫持 props存在相同名称的 props则存在覆盖问题在不遵守约定的情况下也可能造成冲突而且 react 并不会报错。
3. 当存在多个 HOC 时你不知道 Props 是从哪里来的。
4. HOC 属于静态构建,静态构建即是重新生成一个组件即返回的新组件不会马上渲染即新组件中定义的生命周期函数只有新组件被渲染时才会执行。**在这个范式下代码通过一个类似于 装饰器decorator 的技术进行共享。首先你的一个组件定义了大量需要被渲染的标记之后用若干具有你想用共享的行为的组件包裹它。因此你现在是在 装饰 你的组件而不是混入你需要的行为## Render props Render Props 从名知义也是一种剥离重复使用的逻辑代码提升组件复用性的解决方案。在被复用的组件中**通过一个名为“render”(属性名也可以不是 render只要值是一个函数即可)的属性该属性是一个函数这个函数接受一个对象并返回一个子组件会将这个函数参数中的对象作为 props 传入给新生成的组件**。### 它的特点1. 传入函数的属性就是 想要共享的 state这个相同的 state 是组件的状态或者行为
2. 术语 “render prop” 是指一种技术用于使用一个值为函数的 prop 在 React 组件之间的代码共享。
3. render prop 仅仅就是一个函数。
4. render prop是一种模式重点是 prop而不是 render任何被用于告知组件需要渲染什么内容的函数 prop 在技术上都可以被称为 “render prop”.
5. 这里的组合模型是 动态的每次组合都发生在 render 内部因此我们就能利用到 React 生命周期以及自然流动的 props 和 state 带来的优势。
6. 具有 render prop 的组件接受一个函数该函数返回一个 React 元素并调用它而不是实现自己的渲染逻辑### 小栗子xml
DataProvider render{data (h1Hello {data.target}/h1
)}/优势
不用担心 Props 是从哪里来的 它只能从父组件传递过来。不用担心 props 的命名问题。render props 是动态构建的。
可以用 render props来代替 HOC
const withMouse (Component) {return class extends React.Component {render() {return Mouse render{mouse (Component {...this.props} mouse{mouse}/)}/}}
}Hook
在 Hooks 出现以前我们总是纠结的问题 无状态组件 VS Class 组件 生命周期 componentDidMount 和 componentDidUpdate 需要做相同的事情 this 指向 为了保证 this 的指向正确我们经常这么写 this.handleClick this.handleClick.bind(this)
button onClick{() this.handleClick(e)}HOC 和 render props 增加我们代码的层级关系
动机
Hook 的作用
我们的函数变成了一个有状态的函数Hooks 本质上就是一类特殊的函数它们可以为你的函数型组件function component注入一些特殊的功能生命周期钩子的功能useEffect上下文contextuseContext解决 this 指向问题
State Hooks
Effect Hooks
我们写的有状态组件通常会产生很多的副作用side effect。之前都把这些副作用的函数写在生命周期函数钩子里比如 componentDidMountcomponentDidUpdate 和 componentWillUnmount。而现在的 useEffect 就相当与这些声明周期函数钩子的集合体。它以一抵三。
用 Effect Hooks 来解决这个这些副作用。
注意点
react 首次渲染和之后的每次渲染都会调用一遍传给 useEffect 的函数。而之前我们要用两个声明周期函数来分别表示首次渲染componentDidMount和之后的更新导致的重新渲染componentDidUpdate。函数是异步执行的而之前的 componentDidMount 或 componentDidUpdate 中的代码则是同步执行的怎么解绑副作用跳过一些不必要的副作用函数
使用范围
只能在 React 函数式组件或自定义 Hook 中使用 Hook。
Hook 的提出主要就是为了解决 class 组件的一系列问题所以我们不能在 class 组件中使用它。
相比函数编写一个 class 可能需要掌握更多的知识需要注意的点也越多比如 this 指向、绑定事件等等。另外计算机理解一个函数比理解一个 class 更快。Hooks 让你可以在 classes 之外使用更多 React 的新特性。
