react 函数式组件

函数式组件即是用函数的方式来声明组件，其特点在于组件可以直接写在页面内无需再起一个新的页面，同时只需要一个return()，不需要在组件中使用render()。
正常的组件都会在class（class MainTable extends React.Component {}）中声明，有render且需要return。
本篇将会讲述两种函数式定义的组件。两种方式，写法略有不同，但是理念是一致的。

（一）函数是组件的特点

只需return
同一个页面内声明以及使用，即只需要一个文件。
组件中调用props相关的参数或函数时，都不能用 this.props. ，需替换成 props.

（二）方式一：函数式声明，函数式调用（可参照React中文社区）
（1）在class外声明组件

// 函数式组件，写法1
// 注意，props需要传入。
function SquareButton(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

（2）在class内调用


// 函数式调用（这里当做参数squares 函数handleClick都已经声明好了。）
class MainTable extends React.Component {
    renderSquare(i) {
        return (
          <Square
            value={this.state.squares[i]}
            onClick={() => this.handleClick(i)}
          />
        );
      }

    // render中调用
    render() {
        return(
            <div className="board-row">
              {this.renderSquare(0)}
              {this.renderSquare(1)}
              {this.renderSquare(2)}
            </div>
        )
    }
}

（三）方式二：函数式声明，组件式调用
（1）在class外声明组件

const VoucherFrom = createForm((props) => {

    // 函数式组件中接收参数和方法的方式如下：
    const params = props.params;
    props.propsFunction();

    //函数式组件中写函数的方式如下：
    const changeValue = (e) => {
        const value = {};
        const values = '1';
        // 调用传递过来的函数
        props.changeValue(values, value)
    }
    return (
        <div>
            <span>{params}<span>
            {/* 调用组件内自定义的方法如下 */}
            <button onclick={changeValue}></button>
        </div>
    )
})

（2）在class内调用


class ModalUse extends React.Component {
    changeValue(values, value){}
    render(){
        const abc = 1;
        return (
            {/* 组件使用和参数方法传递 */}
            <VoucherFrom params={abc} changeValue={::this.changeValue} />
        )
    }
}



// 以下部分和函数式组件没有半毛钱关系，其只是一个注入。为了完整性，我才写出来的。
// 想了解，可以查看我的博客《React依赖注入说明（mapStateToProps/mapDispatchToProps）》
function mapStateToProps(state, ownProps) {
    return {
    }
}
function mapDispatchToProps(dispatch) {
    return {
        ...bindActionCreators(action, dispatch),
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(ModalUse)

我在react看到了第一种方式的声明，其实第二种也是ok的。就我个人而言，还是第二种方式的声明比较容易。
不想用函数式组价，也可以正常定义组件（class–render()–return()）.你懂就好了。

猜你喜欢