Smart_J_King的博客

App.jsimport React, { Component } from 'react';import { Provider } from 'react-redux';import { BrowserRouter, Routes, Route } from 'react-router-dom';import store from './store';import Home from './pages/home';import Detail from './pages/detail';

Redux概念Redux用于存储各个组件的数据，将数据存到一个公共的store进行管理， Redux = Reducer + Flux。Redux 的工作流程 dispatch(actions) (previousState, action)Action Creators ----------------> Store ------------------------> Reducers ↑ ...

React中ref的使用import React, { Component, Fragment } from "react";import TodoItem from './TodoItem';import './TodoList.css'; ​class TodoList extends Component { constructor(props) { super(props) this.state = { inputValue: '', list...

props，state与render函数的关系当组件的 state 或者 props 发生改变的时候，render函数就会重新执行。当父组件的 render 函数被运行时，它的子组件的render函数都将被重新运行。React中的虚拟DOM方式一：1.state 数据2.JSX 模板3.数据 + 模板 结合，生成真实的DOM，来显示4.state 发生改变5.数据 + 模板 结合，生成真实的DOM，替换掉原先的DOM缺陷：第一次生成了一个完整的DOM片段第

PropTypes 提供一系列验证器，可用于组件接收到的数据类型是有效的。当传入的 prop值类型不正确时，JavaScript 控制台将会显示警告，propTypes仅在开发模式下进行检查。PropTypes使用不同验证器的例子：import PropTypes from 'prop-types';MyComponent.propTypes = { // 你可以将属性声明为 JS 原生类型，默认情况下 // 这些属性都是可选的。 optionalArray: PropType

React.js 使用起来相对更加灵活，用户可配置性更高；Vue.js 使用起来相对简洁，因为Vue 开放了许多API，但是因为诸多API在灵活性上被限制。React开发环境准备使用 React 的方式1.通过<script>标签引入 .js 文件来使用2.通过 create-react-app 脚手架工具安装npxnpx create-react-app my-appnpx 是 npm 5.2+ 及更高版本附带的包运行工具npmnpm init re