react组件基本用法示例小结

 更新时间:2020年04月27日 11:57:44   作者:人生如初见_张默  
这篇文章主要介绍了react组件基本用法,结合实例形式分析了react组件传值、生命周期、受控组件和非受控组件等相关操作技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • react-router v4如何使用history控制路由跳转详解

    react-router v4如何使用history控制路由跳转详解

    这篇文章主要给大家介绍了关于react-router v4如何使用history控制路由跳转的相关资料,文中通过示例代码介绍的的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-01-01
  • 详解React中合并单元格的正确写法

    详解React中合并单元格的正确写法

    用表格进行页面布局,页面布局在各种浏览器的的兼容性, 本文主要介绍了详解React中合并单元格的正确写法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • react 国际化的实现代码示例

    react 国际化的实现代码示例

    这篇文章主要介绍了react 国际化的实现代码示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 浅谈使用React.setState需要注意的三点

    浅谈使用React.setState需要注意的三点

    本篇文章主要介绍了浅谈使用React.setState需要注意的三点,提出了三点对 React 新手来说是很容易忽略的地方,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • react-native动态切换tab组件的方法

    react-native动态切换tab组件的方法

    在APP中免不了要使用tab组件,有的是tab切换,也有的是tab分类切换.这篇文章主要介绍了react-native动态切换tab组件的方法,非常具有实用价值,需要的朋友可以参考下
    2018-07-07
  • 浅谈React组件之性能优化

    浅谈React组件之性能优化

    这篇文章主要介绍了浅谈React组件之性能优化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 深入理解React Native核心原理(React Native的桥接(Bridge)

    深入理解React Native核心原理(React Native的桥接(Bridge)

    这篇文章主要介绍了深入理解React Native核心原理(React Native的桥接(Bridge),本文重点给大家介绍React Native的基础知识及实现原理,需要的朋友可以参考下
    2021-04-04
  • 使用hooks写React组件需要注意的5个地方

    使用hooks写React组件需要注意的5个地方

    这篇文章主要介绍了使用hooks写React组件需要注意的5个地方,帮助大家更好的理解和学习使用React组件,感兴趣的朋友可以了解下
    2021-04-04
  • 快速搭建React的环境步骤详解

    快速搭建React的环境步骤详解

    本篇文章主要介绍了快速搭建React的步骤详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 编写React组件项目实践分析

    编写React组件项目实践分析

    本文通过实例给大家分享了编写React组件项目实践的全过程,对此有兴趣的朋友可以参考下。
    2018-03-03

最新评论