Welcome everyone

React 组件开发

前端 汪明鑫 320浏览 0评论

组件是用来实现特定功能效果的代码集合(html/css/js)

为什么要有组件的概念?
界面功能越来越复杂
组件开发好管理、方便复用、简化项目编码、提高运行效率

 

什么是组件化?
当应用是以多组件的方式实现功能, 这上应用就是一个组件化的应用

 

首先我们在浏览器下个React的工具,方便我们学习和使用React

基本步骤:

1,导入React需要的js文件

2,提供ReactDOM将要放置的容器  如提供一个div

3,定义组件

4,渲染组件

定义组件主要有2种方式,我们直接看代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>react组件</title>
</head>
<body>

<div id="react1"></div>
<div id="react2"></div>


<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>

<script type="text/babel">

  //方式1: 工厂(无状态)函数(简单组件, 推荐使用)
  function MyComponent1() {
    return <h1>我的react组件1</h1>;
  }

  //方式2: ES6类语法(复杂组件, 推荐使用)
  class MyComponent2 extends React.Component {
    render() {
      return <h1>我的react组件2</h1>;
    }
  }

  ReactDOM.render(<MyComponent1/>, document.getElementById('react1'));
  ReactDOM.render(<MyComponent2/>, document.getElementById('react2'));

</script>
</body>
</html>

浏览器展示:

先省察一波元素:

 

 

我们打印一下MyComponent2,看看他到底是什么鬼?

 

 

props,refs,sate也是React的核心知识,之后再慢慢学习

 

 

React组件嵌套

直接上代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>组件嵌套</title>
</head>
<body>


<div id="demo"></div>

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>

<script type="text/babel">

  //定义内部组件
  class Inner extends React.Component {
    render() {
      return <h1>{this.props.item}  Penta Kill !</h1>;
    }
  }

  Inner.propTypes = {
    name: React.PropTypes.string.isRequired
  };

  //定义外部应用组件    主组件
  //注意   Inner也是组件需要放在容器里(div)
  class Outside extends React.Component {

    //要从Outside里数据传入Inner组件
    render() {
      return (
        <div>
          {
            this.props.names.map(
              (item, index) => <Inner item={item} key={index}/>
            )
          }
        </div>
      );
    }
  }

  Outside.propTypes = {
    names: React.PropTypes.array.isRequired
  };

  var names = ['UZI', 'faker', "7777777"];

  //直接渲染外部组件   向组件内部传入外部数据(数组names)
  ReactDOM.render(<Outside names={names}/>, document.getElementById('demo'));


</script>
</body>
</html>

 

React 受控组件

Vue是双向数据绑定的
React是一个单向数据流,但可以自定义双向数据流组件(受控组件)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>受控组件</title>
</head>
<body>
    <!--
    Vue是双向数据绑定的
    React是一个单向数据流,但可以自定义双向数据流组件(受控组件)
    -->
    <div id="demo"></div>

    <script src="../js/react.js"></script>
    <script src="../js/react-dom.js"></script>
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">

        class MyComponent extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    msg: 'xinyeshuaiqi'
                }
                this.handleChange = this.handleChange.bind(this)
            }

            //触发事件的event
            handleChange(event) {
                let msg = event.target.value
                this.setState({
                    msg:msg
                })
            }

            //输入框和下面显示的内容绑定,一起变化,通过state来控制
            render() {
                return (
                    <div>
                        <input type="text" value={this.state.msg} onChange={this.handleChange}/>
                        <p>我跟着你一起变:{this.state.msg}</p>
                    </div>
                )
            }
        }

        ReactDOM.render(<MyComponent/>, document.getElementById('demo'))

    </script>

</body>
</html>

 

转载请注明:汪明鑫的个人博客 » React 组件开发

喜欢 (0)

说点什么

您将是第一位评论人!

提醒
avatar
wpDiscuz