react
糖送圆茗亲
学习
展开
-
react01_安装
react安装——直接使用一、普通方式,在HTML中引入react所需的库,可通过cdn引入库:react、react-dom、babel(用于编译jsx,将其编译为js,也用于将es6转换为es5)<script src="https://unpkg.com/react@16/umd/react.development.js"></script><scrip...原创 2019-10-07 11:40:00 · 86 阅读 · 0 评论 -
react09_表单
react 表单1.input输入框react中用state来设置输入框的值,获取的时候直接获取this.state.inputValue即可class InputForm extends React.Component { constructor(props) { super(props); this.state = {inputValue: ''...原创 2019-10-09 16:03:23 · 92 阅读 · 0 评论 -
react08_列表&Key
react 列表&Key循环输出想显示的内容//想输出的单个项目function MsgItem(props) { return <p id={props.num}>第{props.num}条信息 <button name={props.num}>删除</button></p>;}f...原创 2019-10-09 16:02:30 · 76 阅读 · 0 评论 -
react07_条件渲染
react 条件渲染阻止组件渲染在定义组件的render()方法中返回null可阻止该组件渲染页面初始是显示警告消息的,当点击Hide后,state中的showWarning变为false,这导致警告消息组件被阻止渲染,即隐藏了警告消息function WarningBanner(props) { if (!props.warn) { return null; ...原创 2019-10-09 16:01:50 · 87 阅读 · 0 评论 -
react06_事件处理
react 事件处理一、react事件1.事件的定义React 事件的命名采用小驼峰式(camelCase),而不是纯小写。使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。function activateLasers(){ ...}<button onClick={activateLasers}> Activate Lase...原创 2019-10-09 16:00:40 · 104 阅读 · 0 评论 -
react05_state&生命周期
react state&生命周期ps:本文大部分资料、内容来自react官方文档在元素渲染中写的计时器,通过每秒执行一次ReactDOM.render()来更新页面,但现在希望只写一次代码,只调用一次ReactDOM.render()就能让<Clock />组件自动更新,这需要在<Clock />组件中添加state.一、实现步骤:创建一个同名的 ES6...原创 2019-10-07 11:46:28 · 361 阅读 · 0 评论 -
react04_组件&props
react 组件&props一、函数组件和类组件1.函数组件有效的react函数组件,接受唯一的参数props,并返回一个react元素,在本质上是一个JavaScript函数function Welcome(props){ return <h2>Welcome, {props.name}</h2>}2.类组件类组件是一个es6的class...原创 2019-10-07 11:43:33 · 77 阅读 · 0 评论 -
react03_jsx
react JSX一、JSX官方概述先来一行代码const element = <h2>Hello, tsymq!</h2>;这个标签语法不是一个字符串,也不是HTML,这中语法称为JSX,是一种JavaScript 的语法扩展,它具有 JavaScript 的全部功能。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展,它有以下优点:JS...原创 2019-10-07 11:42:35 · 104 阅读 · 0 评论 -
react02_元素渲染
react元素渲染一、更新元素渲染react元素都是不可变的,当元素被创建渲染后,就无法改变它的属性或内容,更新的唯一方法就是创建一个新的元素,将其传入**ReactDOM.render()**方法,将内容再次渲染。例如网页中的计时器,每秒更新一次当前时间:function timer() { const ele = ( <div> ...原创 2019-10-07 11:41:38 · 86 阅读 · 0 评论 -
react10_状态提升
react 状态提升一个父组件和多个子组件时,本来应存在于子组件的state移动到父组件,子组件使用props,父组件的state作为子组件的props传入子组件,可以使用子组件的功能,使子组件数据同步,也能更新父组件的渲染//根据输入的温度判断是否沸腾 组件function BoilingVerdict(props) { if(props.celsius >= 100){...原创 2019-10-09 16:03:59 · 131 阅读 · 0 评论