react组件基本用法示例小结


Posted in Javascript onApril 27, 2020

本文实例讲述了react组件基本用法。分享给大家供大家参考,具体如下:

组件间传值:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
<div id="app">
 
</div>
<script src="../js/react.production.min.js"></script><!--react核心库-->
<script src="../js/react-dom.production.min.js"></script><!--操作DOM的react扩展库-->
<script src="../js/babel.min.js"></script><!--解析JSX语法-->
<script type="text/babel">
  class Com extends React.Component {
    click = ()=>{
      // console.log(this.input);
      // console.log(this.p.innerText);
      console.log(this.refs.my.value);//父组件访问子组件用refs
    };
 
    render() {
      return (
        <div>
          <input type="text" ref={(input)=>{this.input=input}}/>
          <p ref={(p)=>{this.p=p}}>我是段落</p>
          <input type="text" ref="my"/>
          <button onClick={this.click}>点击</button>
        </div>
      );
    }
  }
 
  ReactDOM.render(<Com/>,document.getElementById('app'));
</script>
</body>
</html>

列表:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
<div id="app"></div>
<script src="../js/react.production.min.js"></script><!--react核心库-->
<script src="../js/react-dom.production.min.js"></script><!--操作DOM的react扩展库-->
<script src="../js/babel.min.js"></script><!--解析JSX语法-->
<script type="text/babel">
  class Add extends React.Component {
    click = ()=>{
      this.props.allAdd(this.input.value);
    };
    render() {
      const {length} = this.props;
      return (
        <div>
          <input type="text" ref={(input)=>{this.input=input}}/>
          <button onClick={this.click}>add{length}</button>
        </div>
      )
    }
  }
 
  class List extends React.Component {
    render() {
      const {list} = this.props;
      return (
        <div>
          <ul>
            {
              list.map((v,i)=>{
                return <li key={i}>{v}</li>
              })
            }
          </ul>
        </div>
      )
    }
  }
 
  class App extends React.Component {
    state = {
      list:['吃饭','睡觉','打游戏','游泳']
    };
    add = (value)=>{
      const {list} = this.state;//获取原先的list
      list.unshift(value);//将添加的值传入list
      this.setState(list);//重新设置list
    };
    render() {
      const {list} = this.state;//获取list
      return (
        <div>
          <Add allAdd={this.add} length={list.length}/>
          <List list={list} />
        </div>
      )
    }
  }
 
  ReactDOM.render(<App />,document.getElementById('app'));
</script>
</body>
</html>

受控组件和非受控组件:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
<div id="app"></div>
<script src="../js/react.production.min.js"></script><!--react核心库-->
<script src="../js/react-dom.production.min.js"></script><!--操作DOM的react扩展库-->
<script src="../js/babel.min.js"></script><!--解析JSX语法-->
<script type="text/babel">
  class Com extends React.Component {
    state = {
      age:''
    };
    //非受控组件 不受state控制
    click = () => {
      console.log(this.input.value);
    };
    change = (event)=>{
      console.log(event.target.value);
      this.setState({
        age: event.target.value
      })
    };
    render() {
      const {age} = this.props;
      return (
        <div>
          姓名:<input type="text" ref={(input)=>{this.input=input}}/>
          <button onClick={this.click}>获取姓名</button>
          年龄:<input type="text" value={age} onChange={this.change}/>
        </div>
      );
    };
  }
  ReactDOM.render(<Com />,document.getElementById('app'));
</script>
</body>
</html>

组件生命周期:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
</head>
<body>
<div id="app"></div>
<script src="../js/react.production.min.js"></script><!--react核心库-->
<script src="../js/react-dom.production.min.js"></script><!--操作DOM的react扩展库-->
<script src="../js/babel.min.js"></script><!--解析JSX语法-->
<script type="text/babel">
  class Com extends React.Component {
    state = {
      msg:123
    };
 
    sing() {
      return new Promise((resolve,reject)=>{
        setTimeout(()=>{
          resolve('唱一首歌');
        },1000);
      })
    };
 
    async get() {
      await this.sing().then((res)=>{
        console.log(res);
      });
    };
 
    componentWillMount() {
      //will会先执行,但不一定先执行完毕
      console.log('之前');
      // this.get();
    }
 
    componentDidMount() {
      //进行ajax操作,获取后台数据
      console.log('之后');
    }
 
    shouldComponentUpdate(nextProps, nextState) {
      const {msg} = this.state;
 
      //如果没有
      if ({msg} !== nextState) {
        return true;
      }
      console.log('更新');
      return false;
    }
 
    componentWillUpdate() {
      console.log('更新之前');
    }
 
    componentDidUpdate() {
      console.log('更新之后');
      //再次获取数据
    }
 
    click = ()=>{
      this.setState({
        msg: 234
      })
    };
 
    render() {
      console.log('render');
      const {msg} = this.state;
      return(
        <div>
          <h1>{msg}</h1>
          <button onClick={this.click}>更新</button>
        </div>
      )
    }
  }
 
  ReactDOM.render(<Com />,document.getElementById('app'));
</script>
</body>
</html>

希望本文所述对大家react程序设计有所帮助。

Javascript 相关文章推荐
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
基于angularJS的表单验证指令介绍
Oct 21 Javascript
深入理解node.js之path模块
May 03 Javascript
JS随机排序数组实现方法分析
Oct 11 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
js键盘事件实现人物的行走
Jan 17 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 Javascript
react基本安装与测试示例
Apr 27 #Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 #Javascript
JS浏览器BOM常见操作实例详解
Apr 27 #Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 #Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 #Javascript
JS严格模式原理与用法实例分析
Apr 27 #Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 #Javascript
You might like
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
JS 实现双色表格实现代码
2009/11/24 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
python中itertools模块zip_longest函数详解
2018/06/12 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
天猫精选:上天猫,就够了
2016/09/21 全球购物
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
什么是会话Bean
2015/05/14 面试题
美德好少年事迹材料
2014/01/19 职场文书
感恩教育活动总结
2014/05/05 职场文书
商品陈列协议书
2014/09/29 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
老干部工作汇报材料
2014/10/28 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
匿名信格式范文
2015/05/27 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
JavaScript canvas实现流星特效
2021/05/20 Javascript