单飞吧的博客

创建（挂载阶段）执行顺序：constructor() → render() → componentDidMount() 钩子函数 触发时机 触发时机 constructor 创建组件时，最先执行 1.初始化state；2.为事件处理程序绑定this render 每次组件渲染都会触发 渲染UI（注意：不能调用setState() ） componentDidMount 组件挂载（完成DOM渲染后） 1.发送网络请求；2.DOM操作 更新（更新阶段）执行顺序：render() →

安装 prop-types yarn add prop-types / npm i prop-types // 导入prop-types包 import PropTypes from 'prop-types' // 添加props校验 App.propTypes = { colors: PropTypes.string } // 添加props默认值 App.defaultProps = { colors: 3 } const App = (props) => { cons

children属性：表示组件标签的子节点。当组件标签有子节点时，props就会有该属性 children属性与普通的props一样，值可以是任意值（文本、React元素、组件，甚至是函数） // children为文本节点 const App = (props) => { console.log(props) return ( <div> <h1>组件标签的子节点：</h1> {props.children} <

Context 可以实现跨组件传递数据，Context 提供了两个组件：Provider 和 Consumer，Provider 用来提供数据，Consumer 用了 获取数据 import React from 'react' import ReactDOM from 'react-dom' // 1.创建context得到两个组件 const {Provider, Consumer} = React.createContext() class App extends React.Component

父传子，父组件在子组件 Child 标签上绑定一个属性，属性的值为需要传递的参数，子组件通过props获取父组件传递过来的值，如果子组件是类组件，那么，props 为 this.props import React from 'react' import ReactDOM from 'react-dom' // 父组件 class Parent extends React.Component { state = { lastName: "wang" } rende

受控组件：受到 React 控制的表单元素 import React from 'react' // 1.受控组件：受到'React'控制的表单元素 // HTML中表单元素是可输入的，也就是有自己可变的状态，而 React 中可变状态通常保存在 state 中，并且只能通过 setState() 方法来修改；React 将 state 与表单元素值 value 绑定到一起，由 state 的值来控制表单元素的值 // 使用步骤 // 1.给表单元素添加name属性，名称与state相同 // 2.根据

React 组件创建方式方式有两种，使用函数创建，和使用类创建。 函数组件又叫做无状态组件，类组件又叫做有状态组件。 函数组件没有自己的状态，只负责数据展示（静），类组件有自己的状态，负责更新UI，让页面“动起来” class App extends React.Component { // constructor() { // super() // // 初始化状态 // this.state = { // count: 0

JSX是React的核心内容。是JavaScript XML简写。优势是声明式的语法，更加直观，与HTML结构相同，降低学习成本，提高开发效率。 //使用JSX创建React元素 const title = ( <h1 className="title"> hello JSX! <span>这是span</span> </h1> ) // 渲染react元素 const root = document.getElementById('r

基本安装与使用 npm i react react-dom // 1.导入react和react-dom import React from 'react' import ReactDOM from 'react-dom' // 2.创建react元素 const title = React.createElement('h1', null, 'hello world!') // 3.渲染react元素 ReactDOM.render(title, document.getElementById('r