CedricD的博客

前言：提起React，总是免不了和Vue做一番对比Vue的API设计非常简洁，但是其实现方式却让人感觉是“魔法”，开发者虽然能马上上手，但其原理却很难说清楚。相比之下React的设计哲学非常简单，虽然有很多需要自己处理的细节问题，但它没有引入任何新的概念，相对更加的干净和简单。关于JSX：在理解JSX之前，我们先抛出一个面试官经常问到的问题，就是为什么在JS文件里我们没有用到React，而在文件顶部需要import引入React呢？想必有很多人都是写过这句代码，但不清楚有什么作用在开始之前，

HOC很多人看到高阶组件（HOC）这个概念就被吓到了，认为这东西很难，其实这东西概念真的很简单，我们先来看一个例子。function add(a, b) { return a + b}现在如果我想给这个 add 函数添加一个输出结果的功能，那么你可能会考虑我直接使用 console.log 不就实现了么。说的没错，但是如果我们想做的更加优雅并且容易复用和扩展，我们可以这样去做：function withLog (fn) { function wrapper(a, b) {

性能优化react的性能优化也基本集中在shouldComponentUpdate这个钩子函数上做文章在 shouldComponentUpdate 函数中我们可以通过返回布尔值来决定当前组件是否需要更新。这层代码逻辑可以是简单地浅比较一下当前 state/props 和之前的 state/props 是否相同，也可以是判断某个值更新了才触发组件更新。一般来说不推荐完整地对比当前 state/props和之前的 state/props是否相同，因为组件更新触发可能会很频繁，这样的完整对比性能开销会

通信其实 React 中的组件通信基本和 Vue 中的一致。同样也分为以下三种情况：父子组件通信兄弟组件通信任意组件父子通信父组件通过 props 传递数据给子组件，子组件通过调用父组件传来的事件函数传递数据给父组件，这两种方式是最常用的父子通信实现办法。父向子传值父组件import { Component } from "react";import PropTypes from "prop-types";export default class Father extends

前言：hooks 是react 16.8 引入的特性，他允许你在不写class的情况下操作state 和react的其他特性。hooks 只是多了一种写组件的方法，使编写一个组件更简单更方便基本用法import React,{useState,useEffect} from 'react'export default function() { const [num,setNum] = useState(100); useEffect(()=>{ con

React 其实自己实现了一套事件机制，首先我们考虑一下以下代码：const Test = ({ list, handleClick }) => ({ list.map((item, index) => ( <span onClick={handleClick} key={index}>{index}</span> ))})以上类似代码想必大家经常会写到，但是你是否考虑过点击事件是否绑定在了每一个标签上？事实当然不是，JSX 上写的

react 生命周期示意图Reconciliation阶段componentWillMount：组件即将被装载、渲染到页面上componentWillReceiveProps：组件将要接收到属性的时候调用shouldComponentUpdate：组件接受到新属性或者新状态的时候调用（可以返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）componentWillUpdate：组件即将更新Commit阶段componentDidMount：组件真