React-注意事项-记录学习过程

      2021年08月08日 星期日 14:33:42     JavaScript   React      React   学习    

react是一个专门用于构建用户ui的库,不是一门新语言,而是一个js库/框架;react的特点就是使用虚拟DOM,页面的加载速度更优化,同时采用声明式编码,操作虚拟DOM更简单,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react测试-虚拟DOM</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        let hello = (<span>
            <a>Hello React!</a>
        </span>)


        ReactDOM.render(hello,document.getElementById("app"));
    </script>
</body>
</html>

?注意

1.标签事件

用户名<input type="text" onChange={this.save}/><br />

this.save这样写就是把this.save的函数给到了react

而如果是onChange={this.save(xx)},这样的话,给到onchange的是函数的返回值,这样的话只会被出发一次,并且之后再怎么促发事件都不会调用this.save方法,因为给到onchange的是函数的返回值

2.高阶函数-函数的柯里化

高阶函数

1.一个函数的参数是一个函数那么这个函数就称为高阶函数: setTimeout,Propmise…

2.一个函数的返回值依然是一个函数那么这个函数就称为高阶函数;

save = (dtype)=>{
    return (e)=>{
        this.setState({[dtype]:e.target.value})
    }
}

函数的柯里化

函数柯里化

我学习React的更新或者更详细的学习过程将会在石墨文档中记录,https://shimo.im/docs/h3y3rgY3xCP6CRcw/ 「React」，可复制链接后用石墨文档 App 或小程序打开


1条评论

    发表评论

  1. RorinL 作者
    2021-10-22 10:57
    h