关闭

React学习

标签: reactjsarraymap
39人阅读 评论(0) 收藏 举报
分类:

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:

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

<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 component, 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 class to declare a component:

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 seems repeat 3 times, same structure, same style. It is good to use a loop to decrease template codes. Remember, DRY(Don't repeat yourself).

//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(伪选择器)

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

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

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

10.If the function create by ourself:   openModel = () => {}

The react function: 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);
}


0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

react学习心得(1)

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

react-native学习路线总结

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

ReactJS学习系列课程(React react常用架构分析)

最近学习React框架,与其说react是一个新的框架,不如过React是一个新的思想,新的尝试,做惯了前端框架的工程师都知道,MVC,MVVM一直被大家公认为一个非常不错的模式,但是Facebook...
  • jiangbo_phd
  • jiangbo_phd
  • 2016-06-28 11:54
  • 2909

React学习中几个注意点

最近学习React,碰到一些细节需要注意的地方。所以记录一下,内容很零散,后期再整理。 1.关于JSX 语法 React 不是一定要使用 JSX 语法,可以直接使用原生 JS。JSX语法看...
  • u012028371
  • u012028371
  • 2016-11-01 19:22
  • 496

ReactNative从学习到放弃——准备工作

ReactNative是Facebook刚出的一个可以跨平台(Android和ios)开发的控件,现在非常流行,虽然还有很多坑,不过学习一下应用到项目中某些模块还是很不错的。所以我这个小菜鸟就准备学习...
  • zjm0518
  • zjm0518
  • 2016-08-05 19:11
  • 939

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

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

React入门学习

React入门学习
  • liujie19901217
  • liujie19901217
  • 2016-04-13 10:43
  • 947

十分详细的React入门实例

学习React不是一蹴而就的事情,入门似乎也没那么简单。但一切都是值得的。今天给大家带来一个详细的React的实例,实例并不难,但对于初学者而言,足够认清React的思考和编写过程。认真完成这个实例的...
  • a153375250
  • a153375250
  • 2016-09-26 10:06
  • 28865

一看就懂的ReactJs入门教程(精华版)

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领...
  • zmx729618
  • zmx729618
  • 2016-11-02 10:43
  • 2803

React Native学习笔记(二)JSX 语法学习

1.什么是JSX JSX并不是一门新的语言,而仅仅是个语法糖,允许开发者在JavaScript中书写HTML语法。实际上,每个HTML标签最终转化为了JavaScript代码来运行。 React的...
  • weimeng809
  • weimeng809
  • 2016-05-22 23:08
  • 2394
    个人资料
    • 访问:2669次
    • 积分:298
    • 等级:
    • 排名:千里之外
    • 原创:28篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档