前端开发之React组件化知识 ╰半夏微凉° 2022-06-16 03:42 185阅读 0赞 \#**前端开发之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支持的事件][React] [React]: https://facebook.github.io/react/docs/events.html
还没有评论,来说两句吧...