ckinmind / reactcollect Goto Github PK

看到代码有这么用的

 const userName = event.target.elements[0].value;
 const repo = event.target.elements[1].value;
const path = `/repos/${userName}/${repo}`;
console.log(path);

这个是ES6新语法

参考资料：ES6: 模板字符串

参考资料1：React 里直接修改 this.state 和调用 setState() 修改 state 的值有什么区别？

参考资料：React从入门到精通系列

参考资料：总结写了3个React页面后遇到的各种坑

• 标签里的ref属性的属性名不要出现中横杠比如message-content，如果有多个单词，直接写成驼峰形式（为什么?）
• 如果组件之间的通信超过的一层，传参就非常麻烦，需要用到react的一个插件叫PubSub订阅发布
• 利用ReactCSSTransitionGroup来添加一些简单的动画效果，比如列表内容增加或者删除时可以有渐进渐出的效果。但是这个标签默认是span标签，使用在table或者options里提示警告，不能在table和options里嵌套span，所以可以通过它本身的component属性，比如component="div"直接将这个标签渲染为我们需要的标签即可。另外css里对应的动画时间要和这里标签里的时间对应
• React-Router和动画的结合使用:除了两种技术的结合之外，有个很重要的地方不要忘记，就是要让每个单独的组件设置样式为position:absolute，否则在动画切换时会出现短暂组件叠加的的情况，用户体验非常差，但是绝对定位后，每个组件都在同一个地方渐入渐出了

1. 执行browserHistory.push()之后，浏览器地址会改变

参考资料：Navigating Programatically

问题：

1. 这两者的功能是不是有部分重叠
2. 怎么样区分使用者两者，什么时候用什么

参考资料：React Component Lifecycle
参考资料：组件的详细说明和生命周期
参考资料：gitbook: Updating and componentWillReceiveProps()

1. 在react里看到引入了这个模块不知到时干嘛的，这个是Object.assign的polyfill
2. 使用的时候在头部 import 'core-js/fn/object/assign';
3. 还需要在package.json里面声明生产环境依赖，开发环境不用，因为都是支持的，但是生产环境，比如IE8就不支持了

参考资料1：Object.assign()
参考资料2： ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍(下)

参考资料：Navigating Programatically

You can also use the router that Router provides on "context"
意思是context提供了route

参考资料：官方文档：Context

官方文档一定要通读一遍

参考资料：用react.js遇到的最大问题求解：不可避免地需要修改this.props.children的样式

参考资料：理解React中es6方法创建组件的this

参考资料1：阮一峰: CSS Modules 用法教程
参考资料2：React项目怎样优雅在浏览器中调试css
参考资料3：CSS Modules 详解及 React 中实践

问题：

1. hash过后生成唯一的class之后，怎么在浏览器中调试
2. 有可能需要js选取某个class搜在的dom吗，这个时候怎么选择

执行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没有切换到产品版本

参考资料：webpack + react 优化：缩小js包体积

参考资料1：Navigating Programatically
参考资料2: 官方文档：Context
参考资料3：React 中 context 的使用
参考资料4：React context 丢失问题

注意看一下官网的用法，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%);
}

几大问题：

1. App这个组件是个函数式组件，里面的{ children, location }是什么意思
2. ReactCSSTransitionGroup中各参数的意义
3. 为什么要用React.cloneElement，和里面的key, 以及location.pathname

参考资料：React 最佳实践——那些 React 没告诉你但很重要的事

信息点：

1. React 与 AJAX （jQuery的替代选择）
2. 一个标准组件的组织结构 （标准的组件结构是怎样的）
3. 使用 PropTypes 和 getDefaultProps()
4. 把计算和条件判断都交给 render() 方法吧
5. 如何动态处理 classNames

参考资料：classnames

可以配和classnames这个工具库一起使用

问题：

1. 如何配置
2. 多个class的情况
3. 注意事项

参考资料：Stackoverflow: What's the difference between “super()” and “super(props)” in React when using es6 classes?

关联issue #9

参考资料：ES6 中的生成器函数介绍

参考资料：Tab deomo

参考资料：React.render和reactDom.render的区别

参考资料：官方文档：mixin

ES6 launched without any mixin support. Therefore, there is no support for mixins when you use React with ES6 classes.

1. 当父组件setState之后会触发子组件的componentWillReceiveProps函数

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>
);
}

参考资料1：掌握这5大核心概念，你就理解了React

参考资料2：React 中函数式声明组件

参考资料：组件的生命周期

参考资料：pubsub-js
参考资料：React 组件间通信
参考资料：React 组件之间如何交流

参考资料：react-router路由
参考资料:分享一个 react + redux 完整的项目，同时写一下个人感悟

参考资料：React 实践心得：key 属性的原理和用法
参考资料：ReactJS修炼之路（二）：组件的key

问题：

1. 一般数组循环的时候会用到，会给每一项插入一个key值，那么这个key值是直接使用index, 还是使用一个带数据特征的独一无二的值，否则可能会遇到上面参考资料中遇到的问题，是更新还是删除再重新创建一个组件

参考资料：React 组件之间如何交流
参考资料：关于react组件间通信的问题

参考资料：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.js代码中经常出现class和super

class Todo extends Component{
    constructor(props){
        super(props)
    }
}

这里的super(props)什么作用？

答案：在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，是基于对父类实例加工，只有super方法才能返回父类实例

参考资料：ES6 super方法问题
关联issue #15

在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]'}
    ]
  }
};

1. 在url-loader的最后添加name=images/[name].[hash:8].[ext], 它会将图片原名加上一个8位的hash码，然后存放到images文件夹下
2. 注意output里面的path配置，我之前配置的是path:'dist/js' 这样打包后的bundle.js就会放到js目录下，但是这样做之后发现打包的图片文件夹images也被打包放到了js文件下，如果去掉path中的js，则bundle.js就无法放到js下，最后尝试是改变filename,变成filename:'js/bundle.js' ，再打包时nbundle.js就在js目录下了，imges文件夹也和js文件夹同级

关联issue #2
参考资料：webpack + react 优化：缩小js包体积

参考资料：深入理解React中的上下文this

这是版本问题，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

关联issue #35 (那里有提到)

参考资料：React createClass 和 Component 有什么区别?
关联 #9

问题产生的原因，看到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';

1. 关于传统的父子组件，是指在一个组件里最后render的时候用了另外一个组件的标签，这时候这两个组件就构成了父子组件

2. 路由route之间也可以嵌套，有父路由和子路由，在父路由对应的component中使用this.props.children就可以将子路由对应的组件包含进来，那么这时候构成父子组件吗?

3. 怎么证明和测试?

参考资料：二十一、React顶级API

出错代码：

 <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

参考资料：扩展语句

import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';

参考资料：import ReactCSSTransitionGroup in ES6 React Javascript

参考资料: 子组件向父组件传值

参考资料：官方文档：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>
    );
  }
}

1. 如果新的props.color和state.count和之前的一样的话就不更新
2. 可以在render里加个console测试，如果状态没有变化，决定不更新，则不会执行render函数

参考资料：关于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 createClass 和 Component 有什么区别?

参考资料：React Mixin 的前世今生