关于react的一点工作总结

阳光穿透心脏的1/2处 2023-08-17 17:20 62阅读 0赞

首先，react是Facebook开发的一套前端框架，仅仅是MVC中的V。核心思想是“封装组件”，组件封装后可以作为一个独立的实体被引入到新的组件中，这样新的组件就又是一个实体了，由于组件的实现了可复用，所以是大大减小了开发的工作量。

\*react的值可以分为**私有**和**公有**，私有的值一般就用this.state来表示了比如：

<Input type="password" before={passwordIcon} name="passwordAgain" id="againPassword“onChange={this.handleAgainChange} value={this.state.passwordAgain} error={this.state.error} placeholder="确认密码"/>,

和这个相关的就是setState了，一般用在事件里面，用来更改数据。

handleChange(e) {
      this.props.validate(e.target.value);  this.setState({passwordAfter: e.target.value});
    }

不过这样的话浏览器会报错说setState没有定义，解决方法呢就是要再构造函数里bind一下，像这样：this.handleChange = this.handleChange.bind(this);

\*公有的呢就是props了，props用于父子组件之间的通信，super(props);放在构造函数里就可以把父组件里的属性继承下来了，当需要从父组件继承的时候，使用this.props就可以了，如下：

handleClick() {
      this.props.onSubmit(this.state.passwordBefore, this.state.passwordAfter, this.state.passwordAgain);
    }

\*react的生命周期基本上就是组件执行的过程了：

第一步执行的是getInitialState,只在组件装载之前调用一次；

第二步是getDefaultProps，作用是只在组件创建时调用一次并缓存返回的对象。

第三步执行的是render,使用原生html标签或者子组件组装生成这个组件的html结构，也可以返回 null 或者 false，这时候 ReactDOM.findDOMNode(this) 会返回 null。

第四步：装载组件触发：componentWillMount 只会在装载之前调用一次，在 render 之前调用，你可以在这个方法里面调用 setState 改变状态，并且不会导致额外调用一次 render。componentDidMount 只会在装载完成之后调用一次，在 render 之后调用，从这里开始可以通过ReactDOM.findDOMNode(this) 获取到组件的 DOM 节点。

更新组件触发：（内嵌循环执行的）

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

这些组件不会在首次render组件的周期调用。

最后一步呢是卸载组件触发：componentWillUnmount

\*以上为react的一些基本概念，一些比较好的学习资源跟大家分享一下：

1[入门教程][Link 1]

2[Facebook github上的使用文档，比较全][Facebook github]

转载于:https://www.cnblogs.com/s-z-y/p/5011072.html

[Link 1]: https://hulufei.gitbooks.io/react-tutorial/content/component.html
[Facebook github]: https://facebook.github.io/react/docs/forms-zh-CN.html