• 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 不要在原来的数据上做修改,做数据追踪,用于判断修改前与修改后的区别

  • 相关阅读:
    异步Http请求封装工具类AsyncHttpClientUtil
    json、javaBean、xml互转的几种工具介绍 (转载)
    大数据小白系列 —— MapReduce流程的深入说明
    大数据小白系列——MR(1)
    大数据小白系列——HDFS(4)
    大数据小白系列——HDFS(3)
    大数据小白系列——HDFS(2)
    APP开发,微信第三方登录的介绍
    Java Lambda基础——Function, Consumer, Predicate, Supplier, 及FunctionalInterface接口
    程序员生存指南——镜像加速
  • 原文地址:https://www.cnblogs.com/zhaowenxin/p/6195624.html
Copyright © 2020-2023  润新知