(办公)探秘react教程20210331

来源：cnblogs　　作者：六一儿童节　　时间：2021/4/6 10:10:06　　对本文有异议

1.create-react-app my-react创建项目
2.npm start启动项目,项目启动是localhost:3000端口
3.Props传递数据:

    const user = {
    name: "Anna",
    hobbies: ['A','B']
  }
<Home name={"Max"} age={12} user={user}/>
子组件:
    {this.props.name}
                   <p></p>
                   {this.props.age}
                   <ul>
                     {this.props.user.hobbies.map((hobby) => <li key={hobby}>{hobby}</li>)}
                   </ul>

3.1.propType判定传递过来得类型:

import PropTypes from "prop-types";
Home.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  user: PropTypes.object
}

3.2.子标签,也可以通过props.children来获取并展示:

<Home name={"Max"} age={12} user={user}>
                       <p>I am child</p>
             </Home>
Home组件下:
 <div>
                 {this.props.children}  
              </div> 
PropTypes判定子节点是否传递过来:
children: PropTypes.element.isRequired

4.事件

 onMakeOlder() {
      this.age += 3;
      console.log(this.age);
    }
调动事件,事件on后面第一个字母大写,同时需要绑定this
onClick={this.onMakeOlder.bind(this)}
onClick={() => {this.onMakeOlder()}} 箭头函数
还可以通过constructor构造方法
为了在回调中使用 `this`，这个绑定是必不可少的    this.handleClick = this.handleClick.bind(this);
补充构造方法:
初始化构造方法,类初始化得方法,拿到props,方法参数里写起来.
    constructor(props){
      super(props);
      this.age = this.props.age
        // 为了在回调中使用 `this`，这个绑定是必不可少的    this.handleClick = this.handleClick.bind(this);
    }

5.state

state窗台,通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面
1.在constructor里声明这个对象
// 初始化构造方法,类初始化得方法,拿到props,方法参数里写起来.
    constructor(props){
      super(props);
      this.age = this.props.age
        // 为了在回调中使用 `this`，这个绑定是必不可少的    this.handleClick = this.handleClick.bind(this);
        this.state = {
           age: this.props.age
        }
    }
2.展示
 <p>{this.state.age}</p>
 
3.改变通过事件
     onMakeOlder() {
      this.setState({
        age: this.state.age + 3
      });
      console.log(this.state.age);
    }

6.react更新dom
虚拟得dom,这个dom和上一个虚拟得dom比较,diff,比较出来结果,找到需要改变得,进行重新渲染.

1.可以在constructor设置一个state得值,然后定时任务只改变一次:
    setTimeout(() => {
          this.setState({
            status: 1
          })
        },3000 )

7.无状态组件:

有state并且改变,这种叫做有状态组件.
   无状态式得组件,也叫做函数式组件
   类方式组件:
   import React,{Component} from "react";
class Header extends Component {
    render(){
        return (
           <div className="container">
             <div className="row">
                 <div className="col-xs-1 col-xs-offset-11">
                   <h1>Header</h1>
                 </div>
              </div> 
           </div>
        )
    }
}
export default Header
  函数式组件(重构):
import React from "react";
const Header = (props) => {
    return (
        <div className="container">
          <div className="row">
              <div className="col-xs-1 col-xs-offset-11">
                <h1>Header</h1>
              </div>
          </div> 
        </div>
    )
}
export default Header
  写法分为3种:
1.es5: React.createClass
 
    2.es6写法:React.Component
3.无状态函数写法
1.无需state,即不处理用户得输入,组件得所有数据都是依赖props传入得。
2.不需要用到生命周期得函数.
无状态组件得好处:
  1.不需要声明类,可以避免大量得譬如extends或者constructor这样得代码
  2.无需要显示得声明this关键字,在ES6得类声明中往往需要将函数得this关键字绑定到当前作用域,而因为函数式声明得特性,我们不需要再强制绑定。
 补充无状态组件是没有生命周期得,如果需要生命周期,需要高阶组件.

8.子组件向父组件传值:回调函数来处理

1.父组件定义方法:
     onGreet(age) {
    alert("Hello" + age)
  }
   2.子组件去调用,传递参数
   handleGreet() {
      this.props.greet(this.state.age)//父组件得方法,传递子组件得值.
    }

9.兄弟组件之间得传递值

通过父组件就可以:子组件得方法,改变父组件,父组件传递给另外一个兄弟组件.

10.双向数据绑定在react中应该如何实现:

常用于表单
   onChange值会变化.
   value得设置会随着状态得变化而变化
   DefaultValue可以设置一下默认值
   <input type="text" defaultValue={this.props.initName}  value={this.state.initName}  onChange={(event) => this.onHandleChange(event)} /><br/>
onHandleChange(event){
      this.setState({
       homelink: event.target.value
      })
     }

11.组件得生命周期:

组件的生命周期可分成三个状态：
    Mounting：已插入真实 DOM
    Updating：正在被重新渲染
Unmounting：已移出真实 DOM
   生命周期的方法有:
1.componentWillMount 在渲染前调用,在客户端也在服务端
2.componentDidMount 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
3.componentWillReceiveProps在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
4.shouldComponentUpdate返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 
可以在你确认不需要更新组件时使用。
5.componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
6.componentDidUpdate在组件完成更新后立即调用。在初始化时不会被调用。
7.componentWillUnmount在组件从 DOM 中移除之前立刻被调用。
1.挂载时用得方法(componentWillMount,componentDidMount )
2.更新得时候用得方法(componentWillReceiveProps,
  shouldComponentUpdate,
componentWillUpdate，
  componentDidUpdate
)
3   组件卸载得时候componentWillUnmount
  
第一阶段:
1.Constructor
2.componentWillmount
3.render渲染
4.componentDidMount 
  第二阶段:
1.componentWillReceiveProps
2.shouldComponentUpdate
3.componentWillUpdate
4.Render()
5.componentDidUpdate