前端开发之React组件化知识

╰半夏微凉° 2022-06-16 03:42 247阅读 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