摘要： 十二、继承方式实现高阶组件 前面介绍的高阶组件的实现方式都是由高阶组件处理通用逻辑，然后将相关属性传递给被包装组件，我们称这种实现方式为属性代理。除了属性代理，还可以通过继承实现高阶组件：通过继承被包装组件实现逻辑的复用。继承方式实现的高阶组件常用于渲染劫持。 例如，当用户处于登录状态，允许组件渲染 阅读全文

摘要： 十一、高阶组件参数传递 高阶组件的参数并非只是一个组件，它还可以接收其他参数。 function withPersistentData(WrappedComponent,key) { return class extends Component { componentWillMount() { le 阅读全文

摘要： 十、高阶组件使用场景 操纵props 在被包装组件接收props前，高阶组件可以先拦截到props，对props执行增加、删除或修改的操作，然后将处理后的props再传递给被包装组件，上一篇的例子就属于这种情况。 通过ref访问组件实例 import Todo from "./components/ 阅读全文

摘要： 九、高阶组件基本概念 高阶函数是以函数为参数，并且返回值也是函数的函数。 高阶组件接收React组件作为参数，并且返回一个新的React组件。高阶组件本质上也是一个函数，并不是一个组件。 高阶组件的函数形式如下： const EnhancedComponent = higherOrderCompon 阅读全文

摘要： 八、性能检测工具 1，React Developer Tools for Chrome 用来检测页面使用的React代码是否是生产环境版本，如果插件图标背景是黑色的，表示当前是生产环境版本的React；如果是红色的，表示当前是开发环境版本的React 2，Chrome Performance Tab 阅读全文

摘要： 七、性能优化 1，使用生产环境版本的库 对于create-react-app脚手架创建的项目，只需要执行npm run build，就会构建生产环境版本的React库。其原理是，一般第三方库都会根据process.env.NODE_ENV这个环境变量决定在开发环境和生产环境下执行的代码有哪些不同。当 阅读全文

摘要： 六、Diff算法 React每次组件的状态或属性更新，组件的render方法都会返回一个新的虚拟DOM对象，用来表述新的UI结构。如果每次render都直接使用新的虚拟DOM来生成真实DOM，那么会带来大量对真实DOM的操作，影响程序执行效率。事实上，React会通过比较两次虚拟DOM结构的变化找出 阅读全文

摘要： 五、虚拟DOM 真实DOM是对结构化文本的抽象表达。在Web环境中，其实就是对HTML文本的一种抽象描述，每一个HTML元素对应一个DOM节点，HTML元素的层级关系也会体现在DOM节点的层级上，所有的这些DOM节点构成一棵DOM树。 操作DOM会引起重排和重绘，过程耗时，所以尽量减少DOM操作。 阅读全文

摘要： 四、特殊的ref ref不仅可以用来获取表单元素，还可以用来获取其他任意DOM元素，甚至可以用来获取React组价实例。可以通过ref控制元素的焦点、文本的选择或者和第三方操作DOM的库集成。 ref破坏了React中以props为数据传递介质的典型数据流。 1，在DOM元素上使用ref 当组件被挂 阅读全文

摘要： 三、组件通信 1，父子组件通信 父组件向子组件通信是通过父组件向子组件的props传递数据完成的，子组件需要改变父组件数据时，调用 父组件通过props传递给子组件 的回调函数。 class Hello extends Component { constructor(props) { super(p 阅读全文