React学习

原创 2018年01月09日 18:22:06

1.when loop array, if you don't have stable IDs for rendered items, you may use the item index as a key as a last resort:

当循环一个数组,如果每个item没有固定的ID,你可以使用item的索引作为最后的选择

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

2.If you want to use two className for react component, use Template String

如果一个react的组件有两个className,可以使用字符串模板将两个className给拼接起来

<div className={`${styles.tipIcon} ${styles.text}`}}>
   <Icon name="checkmark-circle" />
</div>

3.If you don't have the “state” for react component, you can create a component with this simple way:

无状态组件(Stateless ):不具有refs属性

const EditorTips = (props) => {
    return (
        <div className={…}>
	     {props.text}
        </div>
    );
};
export default EditorTips;
In other components, we can use this component like this: 在其他的组件,我们可以这样使用上面定义的组件

import EditorTips from  './EditorTips';
const YourRegistry = (props) => {
    return (
        <div>
            <EditorTips text={props.text}/>
        </div>
    );
};
export default YourRegistry;

If you need the "state", we must use the class to declare a component:

如果你需要state属性,则必须使用class去定义一个组件

class GiftTally extends React.Component {
    state = {
        modalIsOpen: false,
    }

    openModal = () => {
        this.setState(() => {
            return {modalIsOpen: true};
        });
    }

    closeModal = () => {
        this.setState(() => {
            return {modalIsOpen: false};
        });
    }

    render() {
        return (
        	<div className={styles.btnContainer}>
        		<Button size="md" color="secondary" onClick={this.openModal}>
        			Add Gifts
                        </Button>
                 </div>
                 <AddGiftsOverlay show={this.state.modalIsOpen} 
                 	onClose={this.closeModal} 
                        registries={this.props.registries}
                 />
        );
    }
}

GiftTally.propTypes = {
    registries: PropTypes.array,
};

GiftTally.defaultProps = {
    registries: [],
};

export default GiftTally;


4.组件内部数组state:父组件可以将内部状态传递给子组件,状态state更新的时候,组件会重新渲染

this.state是私有状态数组

this.setState() 方法来改变state

而props,是不可变的immutable,来自于父组件


5.React生命周期

 componentWillMount 在组件第一次建立 初始化的时候只执行一次

 componentDidMount 在界面渲染完之后执行 只是render一次 当re-render的时候 不会再次触发 


6.The tips seem to repeat 3 times, same structure, same style. It is good to use a loop to decrease template codes. Remember, DRY(Don't repeat yourself).

当所有的tips具有相同的结构,相同的样式重复了3次,最好使用循环来减少模板代码。

//bad
<div className={styles.tip}>
	<div className={styles.tipIcon}>
		<Icon name="checkmark-circle" />
	</div>
         <div className={styles.tipText}>Wondering how….</div>
</div>
<div className={styles.tip}>
         <div className={styles.tipIcon}>
                 <Icon name="checkmark-circle" />
         </div>
          <div className={styles.tipText}>Adding classic ….</div>
</div>
<div className={styles.tip}>
          <div className={styles.tipIcon}>
                   <Icon name="checkmark-circle" />
          </div>
          <div className={styles.tipText}>Try to ….</div>
</div>

//good
const tips = ['Wondering how …’, 'Adding classic …’,  'Try to ….’];

const EditorTips = () => {
    const tipList = tips.map((tipLi, index) => {
        return(
            <div className={styles.tip}  key={index}>
                <div className={styles.tipIcon}>
                    <Icon name="checkmark-circle" />
                </div>
                <div className={styles.tipText}>{tipLi}</div>
            </div>
        );
    });

    return (
        <div className={styles.editorTipsContainer}>
                <div data-tip-list className={styles.tipsList}>
                    {tipList}
                </div>
        </div>
    );
};
export default EditorTips;


7.Since these elements are hard coded and the amount of them is fixed. It would be more be more descriptive to name each of them and then style them, instead of using nth pseudo selectors(伪选择器)

有些元素是硬编码而且数量有限,则可以给它具体的className去为他们设置样式,代替伪选择器


8.It is generally considered a bad practice to use !important use absolutely necessary.

如果不是特别需要,减少使用!important


9.Since the Row is existent, the Column should be existent. 

It'd make sense to keep the grid concerns in one place. The grid is good for originating UIs with multiple items.

Row和Column属于共存。

将网格关注点放在一个地方是有意义的。网格对于有多个项目的ui来说是很好的。


10.If the function create by ourself,自己编写的方法:   openModel = () => {}

The react function,react自带的方法: componentDidMount () {} 


11.这样判断能够实现这个组件在某个条件下显示

{ registriesLength <= LIMIT && <AddStoreCard length={showRegistries.length} /> }


12.ES6中的箭头函数

1) 函数仅返回一个值,不再进行其他操作

()=>({
   ad : 'sdfasdf'
})

this.setState((preState) => ({
    isOpen: !preState.isOpen
}));
2) 不仅可以返回值,还能进行其他操作
()=>{
   asdfjksdfkjslkdfs;df;
   return({
      ad: 'asdf'
   })
}

this.setState(() => {
    this.props.actions.setSorting(selectedValue);
    return {sortBy: selectedValue};
});


13.jump.js 一个款小型的,现代化的,无依赖的光滑滚动

import jump from 'jump.js';

export function scrollTo(el, options) {
    const defaultOptions = {
        offset: 0,
        duration: 500,
        callback: undefined
    };
    
    const newOptions = Object.assign({}, defaultOptions, options);
    if (global.window) jump(el, newOptions);
}


14.mapStateToProps() is a utility which helps your component gets updated state(which is updated by some other components),

     mapStateToProps()是一个实用工具,它帮助您的组件获得更新状态(由其他组件更新),

     mapDispatchToProps() is a utility which will help your component to fire an action event (dispatching action which may cause the change of application state)

      mapDispatchToProps()是一个实用程序,它将帮助您的组件触发一个动作事件(可能导致应用程序状态更改的调度操作)


15.学会将经常使用的常量放在constants文件夹中,避免在多处去调用这个变量,造成内存浪费

16.ES6字符串模板:当一个变量里面嵌套另一个变量的使用:

style={{ backgroundImage: `url(${transform(`https:${IMAGE_URL}/hub_page/favorite_brands_icon.png`)})` }}

17.onClick={handleClick}  onClick事件中不能传参数     handleClick = (e) => {}

18.箭头函数 () => {} 是会绑定bind(this) 的

19. 关于input 如果设置了value值,是无法键盘直接输入,只能使用其他的途径对value的值进行操作,或者是state控制

可以测试 <input value="123" /> 加深印象

20.一个固定位置的组件Sticky :https://github.com/yahoo/react-stickynode

21.实现当滚动到一个元素时执行一个函数的React组件:react-wayPoint:https://github.com/brigade/react-waypoint

22.new Date() . 日期


附加:webstorm配置


版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/cssshua/article/details/79015957

React学习线路

原文链接:http://geek.csdn.net/news/detail/88222 以下所谈及的,就是为你定制的 React 学习路线。 为了能稳固基础,我们一定要逐步地来进行学习。 倘若你...
  • lynnlovemin
  • lynnlovemin
  • 2016-07-13 10:03:06
  • 1609

React Native学习路线图

网上看见的React Native学习路线图
  • codeteenager
  • codeteenager
  • 2017-08-15 18:29:46
  • 154

React的学习路径——从菜鸟到大牛

如果你之前从未接触过React,你可能会对它的生态感到一头雾水。这可以理解,因为:1、React针对的是接受能力强的开发者和行业专家;2、Facebook仅将它实际生产中应用的框架开源了出来,因此它没...
  • yangxiaobo118
  • yangxiaobo118
  • 2018-04-05 00:40:52
  • 84

React学习指南

学习React快一个星期了,说一下我这个星期的学习路线和心得。在决定学习react之后,我大部分在实验室的时间都用来学习React,中间也有接触过RN(react native),RN是基于移动端开发...
  • sinat_35852163
  • sinat_35852163
  • 2017-03-14 18:47:48
  • 153

react-native学习路线总结

本人新手web前端程序员一枚,应公司要求学习react-native框架,作为博客萌新来讲讲我这一个月学习历程,新人和前端的朋友们可以一看,其他都可看,反正不用你掏钱啊。 首先当然还是介绍一下rea...
  • u014168594
  • u014168594
  • 2016-09-21 17:23:23
  • 8145

react学习心得(1)

ReactDOM.render()  实例化根组件,启动框架,注入标记到原始的DOM元素中 getInitialState() 在生命周期里只执行一次,并设置组件的初始状态 componentDi...
  • qq_26943485
  • qq_26943485
  • 2017-02-07 14:25:27
  • 352

React学习的记录

react学习记录
  • qq_39083004
  • qq_39083004
  • 2017-09-10 09:32:36
  • 74

react 学习持续更新

首先react语法是基于jsfiddle  开始 Hack React 的最简单的方法是用下面 JSFiddle 的 Hello Worlds:&amp;lt;!DOCTYPE html&amp;gt...
  • qq_21423689
  • qq_21423689
  • 2018-04-08 11:37:35
  • 18

React学习之进阶非ES6(十六)

平时我们写React组件的时候一般就是直接用类组件class Greeting extends React.Component { render() { return Hello, {th...
  • qq_18661257
  • qq_18661257
  • 2017-03-20 10:49:41
  • 483

react个人所需网站整理

1、react中文网 2、ECMAScript 6 入门-阮一峰 3、从零学习 React 技术栈系列教程 4、react在线编辑器-codepen 5、react在线编辑器-codepan ...
  • qq_30100043
  • qq_30100043
  • 2017-08-28 09:20:39
  • 610
收藏助手
不良信息举报
您举报文章:React学习
举报原因:
原因补充:

(最多只允许输入30个字)