ckinmind / reactcollect Goto Github PK
View Code? Open in Web Editor NEW📦收集整理所有在使用React/Mobx中遇到的问题, 请看issues
📦收集整理所有在使用React/Mobx中遇到的问题, 请看issues
参考资料:总结写了3个React页面后遇到的各种坑
import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';
参考资料1:Navigating Programatically
参考资料2: 官方文档:Context
参考资料3:React 中 context 的使用
参考资料4:React context 丢失问题
注意看一下官网的用法,ES6的写法
参考资料:pubsub-js
参考资料:React 组件间通信
参考资料:React 组件之间如何交流
参考资料:Navigating Programatically
You can also use the router that Router provides on "context"
意思是context提供了route
参考资料:官方文档:Context
官方文档一定要通读一遍
参考资料:Tab deomo
这是版本问题,0.14以后已经将React拆分了两个库 react 和 react-dom 而getDOMNode改为react-dom中的findDOMNode,所以需要引入react-dom库
import ReactDOM from 'react-dom';
参考资料1:React 0.14 发布,拆分为 react 和 react-dom
参考资料2:findDOMNode提示not function
参考资料1:掌握这5大核心概念,你就理解了React
参考资料2:React 中函数式声明组件
参考资料:关于React版本的问题
来自react画廊应用的问题去
主要的变化涉及以下几点:(1)
在React 0.14之前的版本, react component上的ref属性指向的是对React DOM Component的引用,并不是页面上真实的DOM节点,而在React 0.14之后(包括0.14) , ref开始指向真实的DOM节点
主要的变化涉及以下几点:(2)
在React 0.14之前的版本, 我们使用React Web相关的能力的时候, 只需要引入一个JS文件, react.js, 但React 0.14之后(包括0.14), react的设计团队为了将React的应用场景更加细化,同react-native, react-art, react-canvas, react-three 等形成并行, 将React Web的能力拆分成了 react.js, react-dom.js 并将DOM操作相关的接口,放在了react-dom.js的ReactDOM对象上,所以涉及一些API的变更:
React.render 变成了 ReactDOM.render
React.findDOMNode 变成了 ReactDOM.findDOMNode 等
至于React.render 这些在0.14.X的版本还能用,但是会有warning提示消息,0.15版本将会被彻底废弃,希望大家尽早规避使用老接口
参考资料:React 最佳实践——那些 React 没告诉你但很重要的事
信息点:
ES5写法:
//react 中的render函数
render(){
var a = [1,2,3];
a.forEach(function(){
//在里面调用this.state, 需要在外面bind一下
}.bind(this));
return (
<div>test</div>
);
}
ES6写法:
//react 中的render函数
render(){
var a = [1,2,3];
a.forEach(() => {
//在里面调用this.state, 使用箭头函数,可以不用bind
});
return (
<div>test</div>
);
}
关于传统的父子组件,是指在一个组件里最后render的时候用了另外一个组件的标签,这时候这两个组件就构成了父子组件
路由route之间也可以嵌套,有父路由和子路由,在父路由对应的component中使用this.props.children
就可以将子路由对应的组件包含进来,那么这时候构成父子组件吗?
怎么证明和测试?
参考资料:ES6 中的生成器函数介绍
看到代码有这么用的
const userName = event.target.elements[0].value;
const repo = event.target.elements[1].value;
const path = `/repos/${userName}/${repo}`;
console.log(path);
这个是ES6新语法
参考资料:ES6: 模板字符串
案例:在线地址:codepen.io
const App = ({ children, location }) => (
<div className="app">
<Navbar />
<ReactCSSTransitionGroup
component="div"
transitionName="page"
transitionEnterTimeout={700}
transitionLeaveTimeout={700}
>
{React.cloneElement(children, {
key: location.pathname
})}
</ReactCSSTransitionGroup>
</div>
);
scss
.page-enter {
transform: translateY(100%);
}
.page-enter.page-enter-active {
transform: translateY(0%);
}
.page-leave {
transform: translateY(0%);
transition:
transform .7s cubic-bezier(
0.680,
-0.550,
0.265,
3
);
}
.page-leave.page-leave-active {
transform: translateY(-100%);
}
几大问题:
{ children, location }
是什么意思React.cloneElement
,和里面的key, 以及location.pathname
参考资料:React 组件之间如何交流
参考资料:关于react组件间通信的问题
关联issue #35 (那里有提到)
react.js代码中经常出现class和super
class Todo extends Component{
constructor(props){
super(props)
}
}
这里的super(props)什么作用?
答案:在子类的构造函数中,只有调用super之后,才可以使用this关键字,否则会报错。这是因为子类实例的构建,是基于对父类实例加工,只有super方法才能返回父类实例
参考资料:ES6 super方法问题
关联issue #15
参考资料:二十一、React顶级API
执行webpack -p
打包压缩了js代码之后,在浏览器其运行时,提示了这个警告:
bundle.js:1 Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See https://fb.me/react-minification for more details.e
警告的意思是:引入的React没有切换到产品版本
关联issue #2
参考资料:webpack + react 优化:缩小js包体积
import 'core-js/fn/object/assign';
参考资料1:Object.assign()
参考资料2: ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍(下)
问题:
参考资料:React Component Lifecycle
参考资料:组件的详细说明和生命周期
参考资料:gitbook: Updating and componentWillReceiveProps()
参考资料:扩展语句
参考资料:组件的生命周期
出错代码:
<div id="example"></div>
<script type="text/babel">
var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
</script>
错误信息:
react.js:19287 Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using
参考资料1:Warning: Each child in an array or iterator should have a unique “key” prop
参考资料2:segmentfault
在js里直接引入图片,然后最后打包的时候发现图片的路径不对,如何配置图片的打包路径
参考资料:webpack踩坑之路 (2)——图片的路径与打包
webpack.config.js
module.exports = {
entry: './main.js',
output: {
path: 'dist',
filename: 'bundle.js'
},
module: {
loaders:[
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192&name=images/[name].[hash:8].[ext]'}
]
}
};
name=images/[name].[hash:8].[ext]
, 它会将图片原名加上一个8位的hash码,然后存放到images文件夹下path:'dist/js'
这样打包后的bundle.js就会放到js目录下,但是这样做之后发现打包的图片文件夹images也被打包放到了js文件下,如果去掉path中的js,则bundle.js就无法放到js下,最后尝试是改变filename,变成filename:'js/bundle.js'
,再打包时nbundle.js就在js目录下了,imges文件夹也和js文件夹同级参考资料1:阮一峰: CSS Modules 用法教程
参考资料2:React项目怎样优雅在浏览器中调试css
参考资料3:CSS Modules 详解及 React 中实践
问题:
参考资料:深入理解React中的上下文this
参考资料:React从入门到精通系列
问题产生的原因,看到webpack.config.js里有require一个模块,然后又在其他文件看到impot 一个模块,突然搞不清楚这两种方式的由来和区别
// 比如在webpack.config.js中, 这样引入一个模块
var webpack = require('webpack');
//在别的js中又看到过这样引入模块
import React, { Component } from 'react';
import { Router, Route, Link, IndexRoute, browserHistory } from 'react-router';
参考资料:官方文档:shouldComponentUpdate
demo例子
class CounterButton extends React.Component {
constructor(props) {
super(props);
this.state = {count: 1};
}
shouldComponentUpdate(nextProps, nextState) {
if (this.props.color !== nextProps.color) {
return true;
}
if (this.state.count !== nextState.count) {
return true;
}
return false;
}
render() {
return (
<button
color={this.props.color}
onClick={() => this.setState(state => ({count: state.count + 1}))}>
Count: {this.state.count}
</button>
);
}
}
参考资料:React 实践心得:key 属性的原理和用法
参考资料:ReactJS修炼之路(二):组件的key
问题:
参考资料:stackoverflow: Webpack error ERROR in bundle.js from UglifyJs
问题引起的原因可能是我在main.js中定义的变量用的是let, 而在webpack中配置的打包的使用webpack的plugin, 要压缩ES6代码需要用babel-plugin-uglify,所以解决方案是要么将ES6中let定义变量改为var定义,要么用babel-plugin-uglify去压缩代码
参考资料:React Mixin 的前世今生
参考资料:官方文档:mixin
ES6 launched without any mixin support. Therefore, there is no support for mixins when you use React with ES6 classes.
参考资料: 子组件向父组件传值
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.