React学习

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配置