老莫的笔记本  
  
请选择 进入手机版 | 继续访问电脑版
查看: 815|回复: 0

第二次学习react 小计

[复制链接]

662

主题

878

帖子

5113

积分

超级版主

Rank: 8Rank: 8

积分
5113
发表于 2020-8-5 16:59:48 | 显示全部楼层 |阅读模式



        ================================================jsx 语法
                1.1       
               
                        jsx中的注释要加花括号:
       
                               
       
                                例如:{//这是个注释}
       
       
                1.2
                       
                        jsx 中元素定义样式不能使用class  那是关键字,得使用classname
                       
                                例如:return  <div>         <input className="mmm" />        </div>
       

                1.3       
                       
                        如果在某些特殊情况要转译字符串为html 可以添加 危险属性在标签上:
                       
                                原样:<li key = {index} onClick={this.handleLiClick.bind(this,index)}> {item}</li>
                               
                                添加危险属性转为html :<li key = {index}  dangerouslySetInnerHTML={{__html:item}} onClick={this.handleLiClick.bind(this,index)}></li>


               
                1.4
                                        label 标签的for 不能用,得使用 htmlFor ,因为for 是关键字
                                       
                                       
                                       
       

               


        ======================父子组件传值
       
       
                1.
                        传递普通值只需要在父页面的 子组件标签上添加 自定义属性,然后 在子组件中 使用 this.props.属性  进行调用
                       
                        例如:
                               
                                父组件
                               
                                         <Mitem delfun={this.handleLiClick.bind(this,index)} index = {index} key={index} sdata ={item} />
                                         
                                         // 点击删除
                                        handleLiClick(index){
                                        let listCopy = [...this.state.arr];
                                        listCopy.splice(index,1);
                                        this.setState({
                                            arr:listCopy
                                        })
                                    }
                                       
                                       
                                子组件:
                                        constructor (props){

                                                        super(props);

                                                // 提前绑定,将函数的 this 指向控制好

                                                // 建议所有函数之前 先声明 方便绑定this
                                                        this.del = this.del.bind(this);

                                        }


                                        del(){
                                                        this.props.delfun(this.props.key)
                                        }

                                        render(){

                                                        return  <Fragment>
                                                                <li onClick={this.del} >{this.props.sdata}</li>

                                                        </Fragment>;

                                        }


        特点 以及 一些 逻辑技巧
       
                老开发方式为:[ 命令式编程 ]
               
                React 为 [ 声明式开发,节约DEMO ]        、
                                 [ 可以与其他框架并存  ]        、
                                 [ 组件式开发方式 ]                        、
                                 [ 单向数据流        ]        例如:父组件可以向子组件传值,但是子组件不可以直接修改这个值,可以调用父组件的方法修改值、
                                 [ 视图层框架 ]                、
                                 [ 函数式编程 ]               
       
       
       
       
       
       
===============================================        props /state / render函数的关系
       
        props /state / render函数的关系
       
       
        原理:当组件的 props 或者state 发生改变的时候, render函数就会被重新执行;
       


       
=========================================        React 中的 虚拟DEMO

        虚拟demo 是啥:是一个JS对象,用来描述真实demo
               
                        例如拆分:  
                               
                                <div id="abc"><span>hellow world</span></div>
               
                                ['div',{id:'abc},['span',{},'helllo world']];
                               
       
        之所以能提高性能:
       
                是因为,当数据发生改变时需要替换demo ,这时候react 比较了虚拟demo 中 js对象的变化,只改变了相应的demo ,
                        所以节省了性能。

        DoucumentFragment [存于内存中的元素 也是虚拟demo 的  载体]
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表