react

Angulatr和React都是针对单页开发

两者的表达式的区别：react是单括号，Angular双{{}}

1. 支持ES6的语法
2. 出身：Facebook
2. 下载:如果安装了babel，直接添加react
3. Ant-Design


引入:

     

        import React from "react";//引入虚拟节点
        import ReactDOM from "react-dom";//引入真实节点
        import "./theme/theme.css";//引入css样式表

React操作虚拟节点，ReactDOM操作真实节点

        //创建一个虚拟节点h1Ele
        var h1Ele = React.createElement("h1",{},"hello word");
        //将虚拟节点添加到rApp节点中去
        ReactDOM.render(h1Ele,app);



优势：
ES5 来定定义组件

                
        

var Wrap = React.createClass({
            render() {
                return (
                    <div>
                        <AddTodo />
                        <TodoList />
                    </div>
                );
            }
        })
        
        var AddTodo = React.createClass({
            render() {
                return (
                    <div><input type="text" /><input type="button" value="addTodo" /></div>
                );
            }
        });
        
        var TodoList = React.createClass({
            render() {
                return (
                    <ul>
                        <li>HTML</li>
                        <li>CSS</li>
                     </ul>
                );
            }
        })
        ReactDOM.render(<Wrap />, app)
        

　　

 ES6用class来定义组件

组件并不是真实的DOM节点，而是存在内存之中的一种数据结构，叫虚拟DOM。

只有插入文档之后（ReactDOM.render()），才会变成真实的DOM。

- DOM diff算法：根据React的设计，所有的DOM变动，都先在虚拟DOM上发生，然后再将实际发生的变动，反映在真实的DOM上。
- DOM diff 优势：可以相对的极大的提高页面的性能表现。


【注意】：
    
1. 两类组件：容器组件Wrap、展示组件<AddTodo><TodoList>
2. react是单向的数据流，只能从父级传到子类：props来传递
3. 两个特性：

        
//ES6语法
        
        

 class Wrap extends React.Component{
            constructor(props){
                super(props);
            }    
            render(){
                return (
                    <div>
                        <AddTodo />
                        <TodoList />
                    </div>    
                    );
            }
        }
            
        class AddTodo extends React.Component{
            constructor(props){
                super(props);
            }
            render(){
                return (
                    <div><input type="text" /><input type="button" value="AddTodo" /></div>
                    );
            }
        }

        class TodoList extends React.Component{
            constructor(props){
                super(props);
            };
            render(){
                return (
                    <ul>
                        <li>HTML</li>
                        <li>CSS</li>
                    </ul>
                    )
            }
        }    

        ReactDOM.render(<Wrap />,app)

　　

## 计数器

初始化数据getInitialState：

        getInitialState(){
            return {
                    count:9
                 };
             },


### this.state

组件免不了要跟用户交互，React的一大创新，就是将组件看成一个状态机，一开始就有一个初始状态，然后用户互动，导致状态改变，从而触发重新渲染UI

 触发render更新的两种方式：（状态数据在state上）

        - this.forceUpdate()会触发render的更新
        - this.setState({ count:++this.state.count })也会触发render的更新


以上两这描述组件的特性，都可以保存数据。两者可能会产生混淆

区分：

         this.props:是一旦指定，便不可更改的特性，一般用于传递数据
         this.state:可变,私属于当前，会随着用户互动而产生变化


###  获取真实的DOM节点 --ref属性

## React 不要在原来的数据上做修改，做数据追踪，用于判断修改前与修改后的区别