随笔分类 - react
摘要：优化参数传递 import React from "react"; const {Provider, Consumer} = React.createContext({}); class Son1 extends React.Component { render() { return ( <Cons
阅读全文
摘要：什么是高阶组件 import React from "react"; function Home() { return ( <div>Home</div> ) } function enhanceComponent(WrappedComponent) { class AdvComponent ext
阅读全文
摘要：import React from "react"; class Home extends React.Component { constructor(props) { super(props); this.state = { age: 66 } } render() { console.log('
阅读全文
摘要：key的作用主要是优化 往后面添加一个 li 会生成一个 mutation 对象来记录不同 往前面添加一个 li 则会生成四个 mutation 对象记录不同 添加 key 属性后， diff 算法会根据同层不同位置的比较，这样即使往最前面添加 li 也只会生成一个 mutation 对象记录不同
阅读全文
摘要：渲染流程 首先会执行 render 方法拿到组件的结构 如果拿到的结构是 jsx 则会调用 React.createElement() 生成虚拟 DOM 根据虚拟 DOM 生成真实 DOM 更新流程 组件的 props 或 this.state 发生改变时执行 render() 方法 执行完 ren
阅读全文
摘要：Portals基本使用 import React from 'react'; import ReactDOM from 'react-dom' class Modal extends React.Component { render() { return ReactDOM.createPortal(
阅读全文
摘要：严格模式 import ReactDOM from 'react-dom' import React from "react"; import App from "./App"; ReactDOM.render(<React.StrictMode> <App/> </React.StrictMode
阅读全文
摘要：Fragments组件使用 import React from 'react'; class App extends React.Component { constructor(props) { super(props); } render() { return ( <React.Fragment
阅读全文
摘要：受控组件 import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = { name: 'xiebenyin' } } render() {
阅读全文
摘要：获取类组件 import React from 'react' class Home extends React.Component { render() { return ( <div>我是类组件</div> ) } } class App extends React.Component { co
阅读全文
摘要：原生方法获取DOM(不推荐) import React from 'react';class App extends React.Component { constructor(props) { super(props); } render() { return ( <div> <h1 id={'b
阅读全文
摘要：不常用的生命周期方法 挂载时 静态方法 static getDerivedStateFromProps 会在 constructor 之后 render 之前调用 static getDerivedStateFromProps 静态方法接收两个参数父组件传递过来的 props 和自身的 state
阅读全文
摘要：React生命周期分为3个阶段 挂载时 首先会调用 constructor 创建组件，这里可以通过 props 接收父组件传递过来的数据，可以通过 this.state 初始化组件自己的数据 然后调用 render 渲染组件，主要是返回组件的结构 当组件渲染完毕后调用 componentDidMou
阅读全文
摘要：子组件将数据传递给父组件 import React from 'react'; class Son extends React.Component { constructor(props) { super(props); this.state = { name: 'xiebenyin' } } re
阅读全文
摘要：跨组件通信 import React from 'react'; // 创建上下文件对象 const Context = React.createContext({}); // 从上下文中获取容器组件 // Provider 生产者容器组件 负责生产数据 // Consumer 消费者容器组件 负责
阅读全文
摘要：Redux使用非常简单 安装 npm i redux 基本使用 const redux = require('redux'); // 定义一个状态 let initialState = { count: 0 } // 定义action来修改状态 const addAction = {type: 'A
阅读全文
摘要：父组件传递参数给子组件 (函数式组件) function Son(props) { return ( <div> <p>{props.message}</p> <p>{props.age}</p> </div> )}Son.defaultProps = { // Son组件默认的props值 age
阅读全文
摘要：注释 1 import React from "react"; 2 3 class App extends React.Component { 4 render() { 5 return ( 6 <div> 7 {/* 注释 */} 8 </div> 9 ) 10 } 11 } 12 13 expo
阅读全文
摘要：1 import React from "react"; 2 3 class App extends React.Component { 4 constructor(props) { 5 super(props); 6 this.state = { 7 count: 1 8 } 9 } 10 ren
阅读全文
摘要：1 class App extends React.Component { 2 constructor() { 3 super(); 4 this.state = { 5 message: 'hello react' 6 } 7 } 8 myFn() { 9 console.log(this); /
阅读全文
