【React】React.Component小结

前端之家收集整理的这篇文章主要介绍了【React】React.Component小结前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

React.Component 是一个抽象的Class,通常继承该类来构建自定义的Component。 Component可以将U分离成独立的碎片,有点类似于JavaScript的function,它接受一个任意的输入(props)并返回一个React element描述屏幕中的内容

有两种方法构建Components

1 JavaScript函数

function Welcome(props) {
  return <h1>Hello,{props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}
ReactDOM.render(
  <App />,document.getElementById('root')
);

注意: Component必须返回单个根元素,因而要用

将包住。

2 利用React.Component 创建

class Greeting extends React.Component {
  constructor(props){
    super(props);
    this.state = {
       color: props.initialColor
    };

  }
  render() {
    return <h1>Hello,{this.props.name}</h1>;
  }
}

必须包含render()方法

Component 生命周期

1 Mounting (挂载)

  • constructor() // 构造函数
  • componentWillMount()
  • render()
  • componentDidMount()

2 Updating

  • componentWillReceiveProps()
  • shouldComponentUpdate()
  • componentWillUpdate()
  • render()
  • componentDidUpdate()

3 Unmounting
-componentWillUnmount()

每个Component中有
setState()
通过this.setState({value: dddd}) 更新

Class Properties

-defaultProps

class CustomButton extends React.Component {
  // ...
}

CustomButton.defaultProps = {
  color: 'blue'
};

-displayName
string用来在调试中显示信息

-propTypes

class CustomButton extends React.Component {
  // ...
}

CustomButton.propTypes = {
  color: React.PropTypes.string
};

Instance Properties

props

<Greeting initialColor='blue' />

state 存储一些数据信息,如果不在render()中使用,则最好不要放在state中。

原文链接:https://www.f2er.com/react/305278.html

猜你在找的React相关文章