React中state和props遇到的问题和个人总结

在学习和使用react构建项目的时候，一定会使用到组件的概念，为了某个模块的多次使用，通常会进行组件的复用，这时候就会涉及到组件之间的值的传递，在React中state是无法传递的，组件之间的通信通过props进行，简单来说他们的区别如下：

state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。state 中状态可以通过 this.setState 方法进行更新，setState 会导致组件的重新渲染。

props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。除非外部组件主动传入新的 props，否则组件的 props 永远保持不变。

举个例子，一个组件ShowList中引用了antd的另一个组件Drawer

class ShowList extends React.Component {
	state = {
      isOpen: false,
  };

	triggerDrawer = () => this.setState({ isOpen: !this.state.isOpen });

	render() {
        const { isOpen } = this.state;
        return (
        <Drawer
            className="drawer-list"
            maskStyle={{ backgroundColor: 'rgba(240, 242, 245, 0.8)' }}
            title={<h4>List</h4>}
            visible={isOpen}
            width="25%"
            onClose={this.triggerDrawer}
            destroyOnClose
          >
                <h2>content</h2>
          </Drawer>
        )
    }
}

Drawer是antd的一个组件，翻译过来就是抽屉，用来在指定位置拉出一个面板，类似dialog模态框，但是样式和动画都会好很多，官方的api中有visable用于指定drawer的显示与否

包括onClose的回调函数

在这里用了state中的对象去控制组件的显示，关闭时再通过调用triggerDrawer函数让组件的visable状态变为false，上面说过，setState 会导致组件的重新渲染，以达成想要的效果，这就是state的基本用法。

而props的工作就是传递参数，如果另一个组件MainPage要向ShowList中传递drawer中的content要怎么写呢

class MainPage extends React.Component {
	render() {
        const content = <h2>content</h2>;
        return (
        	<ShowList content = {content} />
        )
    }
}

这样就可以把content对象传入到ShowList组件的props中，这样就可以在ShowList中去使用父组件传来的值啦，值得注意的是，如果是ES6的解构写法，属性名必须一样

const { content } = this.props;

如果是自定义的名字可以这么写

const listContent = this.props.content;

效果都一样，这样一改原来的组件可以改写为

class ShowList extends React.Component {
	state = {
      isOpen: false,
  };

	triggerDrawer = () => this.setState({ isOpen: !this.state.isOpen });

	render() {
        const { isOpen } = this.state;
        const { content } = this.props;
        return (
        <Drawer
            className="drawer-list"
            maskStyle={{ backgroundColor: 'rgba(240, 242, 245, 0.8)' }}
            title={<h4>List</h4>}
            visible={isOpen}
            width="25%"
            onClose={this.triggerDrawer}
            destroyOnClose
          >
                { content }
          </Drawer>
        )
    }
}

如果是多个值的话，一样的写法，在子组件中再去使用就可以

const { content, titile, width } = this.props;

基本就这些啦(｡･∀･)ﾉﾞ 路过顺手点个赞吧～