weixin_42206243的博客

// 1. 导入包import React from 'react'import ReactDOM from 'react-dom'//2. class 关键字创建组件class Movie extends React.Component{ //render 函数的作用，是 渲染 当前组件对应的 虚拟DOM元素 render(){ //return null 必须有返...

概述就像 Android 开发中的 View 一样，React Native（RN） 中的组件也有生命周期（Lifecycle）。所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。RN 组件的生命周期整理如下图：如图，可以把组件生命周期大致分为三个阶段：第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；第二阶段...

1. React开发环境准备安装nodejs和npm：下载地址https://nodejs.org/en/download安装成功后,查看版本shangyudianzideMacBook-Pro:~ shangyudianzi$ npm -v6.9.0shangyudianzideMacBook-Pro:~ shangyudianzi$ node -vv10.16.0创建项...

React中Ref是什么？ref是React提供的用来操纵React组件实例或者DOM元素的接口。ref的作用对象ref可以作用于：React组件的实例class AutoFocusTextInput extends React.Component { constructor(props) { super(props); this.textInput = React....

import React, { Component, Fragment } from 'react';import TodoItem from './TodoItem'import './style.css'class TodoList extends Component {// constructor()：构造函数// 执行：组件加载钱最先调用一次，仅调用一次。// 作用：定...

注意：自 React v15.5 起，React.PropTypes 已移入另一个包中。请使用 prop-types 库 代替。我们提供了一个 codemod 脚本来做自动转换。随着你的应用程序不断增长，你可以通过类型检查捕获大量错误。对于某些应用程序来说，你可以使用 Flow 或 TypeScript 等 JavaScript 扩展来对整个应用程序做类型检查。但即使你不使用这些扩展，Rea...

react是由数据驱动的框架，当数据发生变化页面就会自动的发生变化。它背后的原理，，， 数据和页面联动的机理当组件的state或者props发生改变的时候，render函数就会重新执行，页面就会从新被渲染，因为页面是由render函数渲染出来的。同时，当父组件的render函数被运行时，它的子组件的render都将被重新运行一次什么是虚拟DOM加入没有react，我们自己实现这个功能，思路大...

知识点8、React的生命周期函数9、React生命周期函数的使用场景10、使用Charles实现本地数据11、React中实现CSS过渡动画12、React中使用CSS动画效果13、使用react-transition-group实现动画14、react-transition-group的使用8、React的生命周期函数定义：生命周期函数指在某一个时刻组件会自动调用执行的函数。...

style.css.show { /*opacity: 1; transition: all 0.1s ease-in;*/ animation: show-item 2s ease-in forwards;}.hide { /*opacity: 0; transition: all 0.1s ease-in;*/ animation: hide-item 2s ease-...

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品安装antd $ yarn add antd使用方法 参考官网https://ant.design/docs/react/introduce-cn效果图：4. 代码TodoList.jsimport React, { Component } from 'r...

React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据安装在你的React app中使用React-Redux：yarn add react-reduxProvider和connectReact-Redux 提供组件，能够使你的整个app访问到Redux store中的数据：...

git 源码 https://github.com/fanxiao168/React-todoList效果图3. 创建store store文件夹下 index.jsimport { createStore ,applyMiddleware ,compose} from 'redux';import reducer from './reducer';import ...

在以前的styled-components中设置全局样式只需要 引入injectGlobal 即可，然而今天我用injectGlobal 的时候，总是提示不存在，找了半天找到原因。The injectGlobal API was removed and replaced by createGlobalStyle in styled-components v4. 用官方的话来讲，就是这个API 从...

源代码：https://github.com/fanxiao168/jianshu项目持续更新中…

//构造函数创建实例function Person (name,age) { this.name = name this.age = age}//静态属性Person.info = 'aaaa'//实例方法Person.prototype.say = function(){ console.log('这是 Person 的实例方法')}//静态方法Pers...

构造函数创建实例function Person (name,age) { this.name = name this.age = age}const p1 = new Person('望多多',18)console.log(p1)//通过 new 出来的实例，访问的属性，叫做【实例属性】console.log(p1.name)console.log(p1.age)...

使用function 和 class 两种创建组件方式的对比注意：使用class关键字创建的组件，有自己的私有数据和生命周期函数注意：使用function创建的组件，只有props。没有私有数据和生命周期函数1.用构造函数创建出来的组件：叫做"无状态组件"2.用class关键字创建出来的组件：叫做“有状态组件”3.什么情况下使用有状态组件，什么情况下使用无状态组件？有状态组件和无状态组...

index.js// 1. 导入包import React from 'react'import ReactDOM from 'react-dom'//导入评论组件import CmtList from '@/components/CmtList'// 3. 调用 render 函数渲染ReactDOM.render(<div> <CmtList>&...

1. React简介React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram（照片交友） 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。Angular1 2009 年 谷歌 MVC 不支持 组件化开发由于 React 的设计思想极其独特，属于革命性创新...

安装loadercnpm i style-loader css-loader -D创建css文件css->cmtitem.css.title{ font-size: 14px; } .content{ font-size: 12px; } .cmtbox{ border: 1px dashed #ccc; margin:...

import React from ‘react’import ReactDOM from ‘react-dom’//const myh1 = React.createElement(‘h1’,{id:‘myh1’,title:‘this is a h1’},‘这是一个大大的H1’)//const myh1 = 这是一个大大的h1let a = 10 //渲染数字let str = ‘你...

React.js - 第2天0. 安装 React Developer Tools 调试工具React Developer Tools - Chrome 扩展下载安装地址主要内容学习 创建组件的第二种方式美化React组件的样式小Demo穿起来之前学习的知识点React中绑定事件React组件的生命周期1. React中创建组件第1种 - 创建组件的方式使用构造函数来创...

// 1. 导入包// import React, {Component} from ‘react’import React from ‘react’import ReactDOM from ‘react-dom’// 使用 ES6中 import 导入需要的组件// import Hello from ‘@/components/Hello’// 导入 class 继承// imp...

// 这是父类 【大家可以直接把 父类，理解成 原型对象 prototype】class Person { constructor(name, age){ this.name = name this.age = age }}// 这是子类 美国人 // 在 class 类中，可以使用 extends 关键字，实现 子类继承父类// 语法： class 子类 ...

// 这是父类 【大家可以直接把 父类，理解成 原型对象 prototype】class Person { constructor(name, age){ this.name = name this.age = age } // 打招呼 的 实例方法 sayHello(){ console.log('大家好') }}// 这是子类 美国人 ...

把 自己的样式表，定义为 .scss 文件第三方的 样式表，还是 以 .css 结尾我们只需要为自己的 .scss 文件，启用模块化即可；运行cnpm i sass-loader node-sass -D 安装能够解析scss文件的loader运行cpm i bootstrap@3.3.7 -S添加loader规则：{ test: /\.scss$/, us...

1. React 中绑定事件的注意点事件的名称都是React的提供的，因此名称的首字母必须大写onClick、onMouseOver为事件提供的处理函数，必须是如下格式onClick= { function }用的最多的事件绑定形式为：<button onClick={ () => this.show('传参') }>按钮</button>...

组件分离每一个组件都可以单独分离为一个 .jsx 文件.jsx 的配置import React from 'react'export default function Hello ( props ) { // 将组件暴露给外面可以使用console .log(props);return < div > hello ,这是一个组件 </ div >}或fu...

本文用以记录从调研Redux Saga，到应用到项目中的一些收获。什么是Redux Saga官网解释 来自：https://github.com/redux-saga/redux-sagaredux-saga is a library that aims to make side effects (i.e. asynchronous things like data fetching and...