React 组件开发 – 汪明鑫的个人博客

组件是用来实现特定功能效果的代码集合(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 组件开发

说点什么