前端开发之React组件化知识

#前端开发之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' };

#####状态的三个注意点

不能直接修改状态的值 // Wrong this.state.comment = 'Hello'; // Correct this.setState({comment: 'Hello'}); 状态值的修改可能是异步的 // Wrong this.setState({ counter: this.state.counter + this.props.increment, }); // Correct this.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> // React function 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支持的事件