乐趣区

react之如何写一个管理自有状态的自定义组件

一、函数组件
函数组件类似一个纯函数,接受外部传入的参数,生成并返回一个 React 元素(伪 DOM)。
例如,如下,Greeting 作为一个组件,接受传入的参数 name, 并返回一个内容已填充的 p 标签。

function Greeting (props) {
   return (<p> {props.name},how are you? </p>
   )
}

const element = <Greeting name="Agnes" />
ReactDOM.render(
  element,
  document.getElementById('root')
)

二、class 组件
react 中 class 组件的书写方式跟 es6 中类的书写方式非常接近,可以通过 React.Compnent 进行创建。与函数组件不同的是,该组件可以进行复杂逻辑的处理,既可以接受外部参数,也可以拥有自己的 state,用于组件内的通信。

class HighGreeting extends React.Component {constructor(props){super(props);
     this.state={inputValue: this.props.name} 
     this.handleInputChange = this.handleInputChange.bind(this);
   }
   render () {
     return (
        <input type="text" onChange="handleInputChange"/>
        <p>{this.state.inputValue},how are you?</p>
     )
   }
   handleInputChange(e){
      let value = e.target.value;
      this.setState({inputValue: value})
   }
} 

const element = <HighGreeting name="Agnes" />
ReactDOM.render(
  element,
  document.getElementById('root')
)

上面的组件,接收 props 参数作为初始值,当用户输入时,会实时更新。

  1. 每次定义子类的构造函数时,都需要调用 super 方法, 因此所有含有构造函数的 React 组件中,构造函数必须以 super 开头。调用 super 相当于初始化 this.props。
  2. class 组件内部可以定义 state, 相当于 vue 组件内的 data, 更改时需要调用 this.setState, 每次调用该方法时,都会执行 render 方法,自动更新组件。如上图,监听 input 的 onchange 事件,实时更改 inputValue 的值并展示。
  3. 需要注意的是,props 不仅可以传递值,还可以传递函数,甚至传递另一个组件。(这一点跟 vue 不一样,后面的文章会再细讲。)
退出移动版