react
乌索普-
这个作者很懒,什么都没留下…
展开
-
React 生命周期函数
理解:1.组件对象从创建到死亡它会经历特定阶段2.React组件对象包含一系列钩子函数(s生命周期回调函数)在特定的时刻调用3.我们在定义组件时,在特定的生命周期回调函数中做特定的工作补一个知识点:mount是挂载,unmount是卸载。把页面显示出来就是挂载这里简单说一下:componentDidMount(){} :组件在挂载完毕时调用。如果有需求我们有一个定时器在页面挂载时就开启,那定时器就可以写在这个函数里componentWillUnmount(){}:组件即将被卸载时调用他们.原创 2021-01-04 16:00:39 · 101 阅读 · 0 评论 -
react ref
ref对象也是存在组件实例中(this),它有三种形式:字符串形式、回调函数式、createRef1.字符串形式:<div id="test"></div> <script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js">原创 2020-12-31 18:50:37 · 87 阅读 · 0 评论 -
react props
1.props对象存储在组件实例对象中(this)理解:-每个组件对象都会有props(properties)属性-组件标签的所有属性都保存在props中作用:-通过标签属性从组件外向组件内传递变化的数据-注意:组件内部不要修改props(只读的)2.三个例子:2.1 props的基本使用 <div id="test"></div> <div id="test2"></div> <div id="test3"><原创 2020-12-31 18:45:03 · 85 阅读 · 0 评论 -
...展开运输符
<script> // 用法1:展开一个数组 let arr = ['1','你好','蔡庆豪']; let arr1 = [1,2,3,1] console.log(...arr,...arr1); // 用法2:连接数组 let arr3 = [...arr , ...arr1] console.log(arr3); // 用法3:构造字面量对象时使用 let person = {name:'山治',age:20}.原创 2020-12-31 14:05:13 · 75 阅读 · 0 评论 -
react state小实例
1。点击div里的的文字,天气在“炎热”和“寒冷”之间切换点击之前:点击之后:<script type="text/babel"> class Demo extends React.Component{ constructor(props){ super(props) this.state = { isHot:false } } clickFun = () => {原创 2020-12-30 23:45:27 · 126 阅读 · 0 评论 -
react-02 JSX
1.额外的笔记:4.关于虚拟DOM:-本质是OBject类型的对象(一般对象)-虚拟DOM比较“轻”,其属性方法比较少,真实DOM比较“重”。-虚拟DOM最终会被React转化为真实DOM呈现在页面上5.jsx规则-定义虚拟DOM时,不要写引号-标签中混入JS表达式时要用{} < h1>{data}< /h1>-样式的类名指定不要用class,要用className < h1 className = {}>{data}</ h1>-内联样式原创 2020-12-30 17:22:45 · 54 阅读 · 0 评论 -
react 引包01
1.在写案例之前我们需要引入几个文件:babel.min.jsreact-development.jsreact-dom-developments1.写react要引入babel.min.js,因为react会用到jsx,但是浏览器不认识jsx,只认识js,所以需要babel帮我们转换,之前的es6转es5也会用到2.react-development.js是react核心库,肯定要引入3.react-dom-developments是帮助我们操作dom的扩展库//引入这三个文件是有顺序的:原创 2020-12-30 15:30:37 · 167 阅读 · 0 评论