OOCL-React Developing

OOCL

1. React 介绍

   • 与Jquery的对比
     
     • DSL:声明式设计 - HTML这种语义话标签是不是很容易学习？
     • Jquery直接操作Dom, 是野战，正规作战需要战术，就如抽象MVC模型，用router提前声明路由轮转的逻辑，实现的时候就不需要大量的switch case
     • 组件重用 - 无状态
     • Model 与 View的同步机制
     -
   • 为什么会出现
   • 优势

2. React 的工作机制

   • 核心概念及它们之间的关系
     
     • web Component
     • State
     • Props
     • Render
   • 工程实践
     
     • Container Component
     • Presentation Component

class ListUI extends React.Component{
    render(){
        let data = this.props.data;
        return (
            <ul>
                {data.map(item => <li key={item.id} >{item.text}</li>)}
            </ul>
        )
    }
}
class List extends React.Component{
    constructor(){
        super();
        this.getData = this.getData.bind(this);
    }
    render(){
        let data = this.getData();
        return <ListUI data={data} />
    }
    getData(){
        return [{id : 1,text : 'hello'},{id : 2,text : 'world'}];
    }
}

    - CSS 内嵌

1. React component start up

1. Counter Component
   https://www.cnblogs.com/doudoublog/p/7775441.html

1. Todo List App

• 1.展示Todo List
  
  • import css and use class directly
  • use className attr for assign class to html tag
• 2.添加Todo Item - 重构组件内的数据是无副作用的，每次改变都是一个副本
• 3.勾选Item完成
• 4.Filter Todo List - 重构filter样式，利用classname,动态定义样式，减少js界面逻辑操作
• 5.编辑修改Todo Item
• 6.实时显示为完成Todo Item 数量
• 7.完成所有Todo Items
• 8.清除已经完成Todo Items