react
the_lower
这个作者很懒,什么都没留下…
展开
-
react学习第五天
react生命周期:组件从实例化到渲染到最终从页面中销毁,整个过程就是生命周期,在这个生命周期中,我们有许多可以调用的事件,也俗称为钩子函数。生命周期的3个状态:mounting:将组件插入到DOM中updating:将数据更新到DOM中unmounting:将组件移除DOM中生命周期钩子函数:componentWillMount:组件将要渲染componentDidMount:组件渲染完毕componentWillReceiveProps:组件将要接收props数据shouldCo原创 2020-08-03 22:47:51 · 74 阅读 · 0 评论 -
react学习第四天(三)
react列表渲染:将列表的内容拼装成数组放置到模板中import React from 'react';import ReactDOM from 'react-dom';let arr = ["小明","小黑","小白"]let arrHtml = [<li>小明</li>,<li>小黑</li>,<li>小白</li>] //将数据拼装成数组jsx对象class Welcome extends React.Compone原创 2020-08-01 16:16:48 · 89 阅读 · 0 评论 -
react学习第四天(二)
react条件渲染1、案例一import React from 'react';import ReactDOM from 'react-dom';import'./App.css';function UserGreet(props){ return ( <h1>欢迎登陆</h1> )}function UserLogin(props){ return ( <h1>请先登录</h1> )}class Paren原创 2020-08-01 14:56:31 · 87 阅读 · 0 评论 -
react学习第四天(一)
react事件:绑定事件的命名,用驼峰命名法{ } 中传入一个 函数,而不是字符串<button onClick={this.sendData}>传递数据给父元素</button>react返回的事件对象是代理的原生事件对象,如果想要查看事件对象的具体值,必须直接输出事件对象的属性,直接输出console.log(event)打印出属性值都为null原生js阻止默认行为时,可以直接返回return false,react中,阻止默认行为必须e.preventDefa原创 2020-08-01 13:52:00 · 78 阅读 · 0 评论 -
react学习第三天(二)
1、父组件向子组件传数据:props父组件向子组件传数据:props 单向流动props的传值可以是任意的类型props可以设置默认值:HelloMessage.defaultProps = { name: '老陈' } //name是变量名,可以设置多个默认值props可以传递函数,可以传递父元素的函数,就可以修改父元素的state状态,从而实现子组件向父组件传递数据2、子组件向父组件传递数据:调用父组件的函数从而操作父元素的数据,从而实现数据从子组件传递给父组件...原创 2020-08-01 13:28:27 · 76 阅读 · 0 评论 -
react学习第三天(一)
react状态管理react中的 state 相当于vue中的 data ,但是使用方式和vue不一致。修改state的正确方式,调用setState,切勿重新修改数据例: 每隔1行输出当前时间import React from 'react';import ReactDOM from 'react-dom';import'./App.css';class Clock extends React.Component{ constructor(props){ super(pro原创 2020-07-31 22:12:51 · 106 阅读 · 0 评论 -
react学习第二天(三)
react组件:函数式组件、类组件1、函数式组件//函数式组件function Father(){ //组件名字要大写 return ( <div> <h1>函数式组件</h1> </div> )}ReactDOM.render( <Father/>, document.querySelector('#root'))//函数式组件function Father(){ //组件名字原创 2020-07-29 23:52:25 · 129 阅读 · 0 评论 -
react学习第二天(二)
jsx_style 样式let exampleStyle = { background: "pink", borderBottom: "1px solid blue" //注意要使用驼峰命名法}let element = ( <div> <h1 style={exampleStyle}>helloworld</h1> //jsx中不能在style中直接添加样式 //<h1 style="height: 200px;"&原创 2020-07-29 23:13:46 · 83 阅读 · 0 评论 -
react学习第二天(一)
1、react jsx语法优点jsx执行更快,编译为javascript代码时进行优化类型更安全,编译过程如果出错,就不能编译,及时发现错误jsx编写模板更加简单快速(不要跟vue比)2、react jsx语法注意:jsx必须要有根节点正常普通html 元素要小写,如果是大写,默认是组件3、jsx表达式//例一:let str = '当前的时间是:'let time = new Date().toLocaleTimeString()let element = ( <d原创 2020-07-29 22:29:28 · 108 阅读 · 0 评论 -
react学习第一天
react 构建用户界面的javascript库,主要用于构建ui界面,2013年开源。特点:声明式的设计高效,采用虚拟DOM来实现DOM的渲染,最大限度地减少DOM的操作灵活,跟其他库灵活搭配使用JSX,俗称JS里面写HTML,javascript语法的扩展组件化。模块化。代码容易复用,2016年之前大型项目非常喜欢react单向数据流,没有实现数据的双向绑定,数据->视图->事件->数据1、安装脚手架npm install -g create-react-app原创 2020-07-28 23:15:52 · 95 阅读 · 0 评论