入门react
state和props的区别props是作为传递给组件的，就像函数参数一样state是在组建内部使用的，当需要改变时候可以通过setState进行修改。对于setState的使用有个注意点，就是setState可能是异步的我应该如何更新那些依赖于当前的 state 的 state 呢？那就是给setState传一个函数给 setState 传递一个对象与传递一...
2024-01-10
react项目
React 简书项目1：create-react-app “jianshu”2:项目准备：备注：是全局的样式，放入reset.css。3：引入第三方模块 styled-components ，yarn add styled-components -S，该模块是把css变成js文件，把index.css换成style.js 4：style.js引入reset.cssimport { createGlobalStyle } from 'styled-components'export const Global...
2024-01-10
react资料
1 引入库<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>2 hello react !<s...
2024-01-10
react 基础
react 组成 一、react 组件基础 1、React 虚拟Dom概念，这是react性能高效的核心算法 2、React 组件，理解react组件化 3、React 多组件嵌套 4、jsx 内置表达式 5、生命周期，纵观整个react的生命周期 2、React 属性与事件 1、State 属性，控制着react...
2024-01-10
react采坑笔记
1. dva + antd input设置defaultVaule时查看时inpu有值但是页面上不显示解决办法 设置一个key值，当key值改变从新渲染<div key={this.props.value}><input type="text" defaultValue={this.props.value || ''} /> </div> ...
2024-01-10
显示react配置
1、由于react默认隐藏webpack配置需要手动显示。npm run eject//Are you sure you want to eject? This action is permanent. (y/N) y...
2024-01-10
react-dnd
http://react-trello-board.web-pal.com/https://react-dnd.github.io/react-dnd/docs-tutorial.htmlhttps://codepen.io/anon/pen/xrwjyX?editors=1111...
2024-01-10
react高级指引
参考网站https://react.docschina.org/docs/jsx-in-depth.html深入 JSX本质上来讲，JSX 只是为 React.createElement(component, props, ...children) 方法提供的语法糖。<MyButton color="blue" shadowSize={2}> Click Me</MyButton>编译为：React.createElement( MyButton, // 组件名称 {color: 'blue', sh...
2024-01-10
react性能优化
react是由facebook公司推出的,主打的口号就是高性能。那么我们在使用的时候，如果能在做一下优化的，那么react使用的性能会更高，用户体验也会更好。下面我就列出几种优化的方案供大家参考一下1. setState的优化16.0更新以后，setSate书写的时候，可以直接穿一个带两个参数的函数，使得我们在重新...
2024-01-10
react 基础篇
react 初学2018/10/27/ 10:18:59react 基础常识jsx 语法及使用规范jsx 是被使用在模板中的，也就是 return( jsx 写在这里 )变量这样写{value}, 执行js基础操作这样写{ 1 + 1 }， 还可传入数组，jsx会自动展开数组 render(){ var arr = [<div>我是div</div>, <p>我是p</p>, <span>我是span</span>] return（ <div>{arr}</div> ） }...
2024-01-10
react相关小技巧
一、我们在项目中切换路由的时候可能会遇到Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.Please check the code for the xxx component.关于react中切换路由时报以上错误，实际的原因是因为在组件挂载（mo...
2024-01-10
react中使用屏保
1,默认路由路径为屏保组件 1 <HashRouter history={hashHistory}> 2 <Switch> 3 <Route exact path="/" component={ScreenSaver} /> 4 <Route exact path="/brandIntroduce" component={BrandIntroduce} /> 5 ...
2024-01-10
react项目8点优化
本文篇幅较长，将从 编译阶段 -> 路由阶段 -> 渲染阶段 -> 细节优化 -> 状态管理 -> 海量数据源，长列表渲染方向分别加以探讨。一 不能输在起跑线上，优化babel配置,webpack配置为项1 真实项目中痛点当我们用create-react-app或者webpack构建react工程的时候，有没有想过一个问题，我们的配置能否让...
2024-01-10
react-基础(2)
表单相关固定的几个属性和事件value: <input>,<textarea>;checked: <input> typeof checkbox, radio;selected: <option>;onChange: 作用于上面元素;默认值 render: function() { return <input type="text" defaultValue="Hello!" />; }获取事件触发handleChange: function(event) { this.setState({va...
2024-01-10
react中的性能优化
react中的性能优化 在项目开发的过程中，当你完成了一个产品的开发并不算你项目的结束，因为你还要去考虑你的代码的执行效率，项目的运行速度等问题，因此在react中，有如下的办法去提升你在项目开发中的效率问...
2024-01-10
react搭建项目流程
1 项目搭建 npm install -g create-react-appcreate-react-app react-mobilecd react-mobilenpm install从上面的项目目录可以看到，没有webpack配置文件，这是因为这个文件被隐藏了起来，如果想控制webpack配置文件，可以执行npm eject命令，目录下面就会出现config文件。注意：npm eject之后，删除node_modules文件 重新npm install ...
2024-01-10
react基础知识总结
目录前言开始React 生命周期React FiberReact setStateReact 事件机制前言最近在准备面试。复习了一些react的知识点，特此总结。开始React 生命周期react 16以前的生命周期是这样的组件在首次渲染时会被实例化，然后调用实例上面的componentWillMount，render和componentDidMount函数。组件在更新渲染时可以调用compon...
2024-01-10
react 写一个贪吃蛇
示例：全部代码如下：snake.jsximport React, { Component } from 'react';import PropTypes from 'prop-types';import { is, fromJS } from 'immutable';import "./snake.less";const TYP = { normal:1, head:2, body:3, food:4};const DIRCTION = { top:1, bottom:2...
2024-01-10
学习react心得及总结
注意学习这个在D盘：小红书第一部分的案例react/new-my-app 小红书第二部分的案例react/make-redux 小红书第三部分的案例react/my-app-higher 并且里面有说且文字react生命周期及其它注意事件/** react中组件里的render函数可以找到组件的this* 在render方法里调用函数时函数是可以找到this的，react中组件里的方法函...
2024-01-10
react 环境快速搭建
1. yum install nodejs2.npm 淘宝镜像配置 参考 http://blog.csdn.net/wangweiscsdn/article/details/534149653.node -v4.npm -v5. 项目目录搭建[html] viewplain copy//package.json { "name": "chatme", "version": "1.0.0", "description": "", "author": "weiwei", "...
2024-01-10
react学习记录（一）
一、React是什么 声明式写法（强调结果，命令式编程强调过程） 组件化 一次学习，随处编写（多种应用场景，web程序，原生手机应用，系统应用，命令行工具）二、为什么学习react 大公司加持-facebook 最流行，使用人数最多，被开发者喜爱 简...
2024-01-10
react 使用的小建议
使用pureRender，setState和Immutable.js来操作stateImmutable 中文意思不可变。不能直接修改state的值，要用setState 和Immutablereact 官方要求不要直接修改state，比如this.state.name = "suyuan"是错误的写法，应该用this.setState({name, "suyuan"})；原因1.其实state并不是不可变的，官方是希望你把他当做不变来用，因为只有se...
2024-01-10
平时写react 小技巧
Stateless function 无状态组件平时写组件用到比较多的就是无状态组件，不但优雅，也是优化react性能的一种手段。 const Greeting = ({ name, style }) => { return <div style={style}>{name}</div> };Array as children 把数组数据渲染出来经常会遇到处理数组数据的情况，可以用下面的方式简单的渲染出来。 render() { ...
2024-01-10
