前端开发之React组件化知识

最近公司开发一个项目用的React自己学习了一下，顺便就整理出来。

基于组件的开发是React三大理念之一。通过组件的组合，去构建更复杂的UI。 组件是由元素组成的，定义组件的语法叫JSX。

以往的前端开发中，有”画面/页面”的概念，衡量一个系统规模时，可以说这个系统有1000个页面。 在组件化开发中，可以理解为一个页面由多个组件构成，一个组件由任意多元素构成。组件可以嵌套。 组件由属性(Props), 状态(State)和事件组成。有自己的生命周期。

一个简单例子：

class HelloMessage extends React.Component {  render() {    return <div>Hello {this.props.name}</div>;  }}ReactDOM.render(<HelloMessage name="John" />, mountNode);

定义组件的两种方法

函数组件

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

类组件

class Welcome extends React.Component {  render() {    return <h1>Hello, {this.props.name}</h1>;  }}

如何判断，什么场景定使用函数定义或者类定义？

如果一个组件不需要修改自己的属性时，定义为函数组件，否则类组件。

属性和状态（Prop, State)

属性一般都是从调用它的组件中传入的。组件内部不会改变属性值。 状态是组件内部私有的，组件自己完全控制的。 属性和状态都可以是一个值，或者对象，或者数组等。区别是属性值是别人的，状态值是自己管理的。

属性的类型检查和默认值

class Greeting extends React.Component {  render() {    return (      <h1>Hello, {this.props.name}</h1>    );  }}// 属性类型检查Greeting.propTypes = {  name: React.PropTypes.string};// 属性默认值Greeting.defaultProps = {  name: 'Stranger'};

状态的三个注意点

• 不能直接修改状态的值

// Wrongthis.state.comment = 'Hello';// Correctthis.setState({comment: 'Hello'});

• 状态值的修改可能是异步的

// Wrongthis.setState({  counter: this.state.counter + this.props.increment,});// Correctthis.setState((prevState, props) => ({  counter: prevState.counter + props.increment}));

• state updates are Merged

事件

组件的事件类似HTML标签的事件，只是命名采用小驼峰。

// html<button onclick="activateLasers()">  Activate Lasers</button>

// React<button onClick={activateLasers}>  Activate Lasers</button>

在React中，不能用return false来阻止事件的默认行为。必须用preventDefault

// html<a href="#" onclick="console.log('The link was clicked.'); return false">  Click me</a>

// Reactfunction ActionLink() {  function handleClick(e) {    e.preventDefault();    console.log('The link was clicked.');  }  return (    <a href="#" onClick={handleClick}>      Click me    </a>  );}

组件生命周期

组件从创建到显示的过程

• constructor()
• componentWillMount()
• render()
• componentDidMount()

组件的更新过程

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

• componentDidUpdate()

  组件销毁

• componentWillUnmount()

最后奉上React支持的事件链接 React支持的事件