the_lower的博客

react生命周期：组件从实例化到渲染到最终从页面中销毁，整个过程就是生命周期，在这个生命周期中，我们有许多可以调用的事件，也俗称为钩子函数。 生命周期的3个状态： mounting：将组件插入到DOM中 updating：将数据更新到DOM中 unmounting：将组件移除DOM中 生命周期钩子函数： componentWillMount：组件将要渲染 componentDidMount：组件渲染完毕 componentWillReceiveProps：组件将要接收props数据 shouldCo

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

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

react事件： 绑定事件的命名，用驼峰命名法 { } 中传入一个 函数，而不是字符串 <button onClick={this.sendData}>传递数据给父元素</button> react返回的事件对象是代理的原生事件对象，如果想要查看事件对象的具体值，必须直接输出事件对象的属性，直接输出console.log(event)打印出属性值都为null 原生js阻止默认行为时，可以直接返回return false，react中，阻止默认行为必须e.preventDefa

1、父组件向子组件传数据：props 父组件向子组件传数据：props 单向流动 props的传值可以是任意的类型 props可以设置默认值： HelloMessage.defaultProps = { name: '老陈' } //name是变量名，可以设置多个默认值 props可以传递函数，可以传递父元素的函数，就可以修改父元素的state状态，从而实现子组件向父组件传递数据 2、子组件向父组件传递数据：调用父组件的函数从而操作父元素的数据，从而实现数据从子组件传递给父组件 ...

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

react组件：函数式组件、类组件 1、函数式组件 //函数式组件 function Father(){ //组件名字要大写 return ( <div> <h1>函数式组件</h1> </div> ) } ReactDOM.render( <Father/>, document.querySelector('#root') ) //函数式组件 function Father(){ //组件名字

jsx_style 样式 let exampleStyle = { background: "pink", borderBottom: "1px solid blue" //注意要使用驼峰命名法 } let element = ( <div> <h1 style={exampleStyle}>helloworld</h1> //jsx中不能在style中直接添加样式 //<h1 style="height: 200px;"&

1、react jsx语法优点 jsx执行更快，编译为javascript代码时进行优化 类型更安全，编译过程如果出错，就不能编译，及时发现错误 jsx编写模板更加简单快速（不要跟vue比） 2、react jsx语法注意： jsx必须要有根节点 正常普通html 元素要小写，如果是大写，默认是组件 3、jsx表达式 //例一： let str = '当前的时间是：' let time = new Date().toLocaleTimeString() let element = ( <d

react 构建用户界面的javascript库，主要用于构建ui界面，2013年开源。 特点： 声明式的设计 高效，采用虚拟DOM来实现DOM的渲染，最大限度地减少DOM的操作 灵活，跟其他库灵活搭配使用 JSX，俗称JS里面写HTML，javascript语法的扩展 组件化。模块化。代码容易复用，2016年之前大型项目非常喜欢react 单向数据流，没有实现数据的双向绑定，数据->视图->事件->数据 1、安装脚手架 npm install -g create-react-app