办公探秘react教程20210331

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}【办公探秘react教程20210331】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.isRequired4.事件
onMakeOlder() {      this.age += 3;      console.log(this.age);    }调动事件,事件on后面第一个字母大写,同时需要绑定thisonClick={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.createClass2.es6写法:React.Component3.无状态函数写法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=https://tazarkount.com/read/{this.props.initName} value={this.state.initName} onChange={(event) => this.onHandleChange(event)} />
onHandleChange(event){ this.setState({ homelink: event.target.value }) }11.组件得生命周期:
组件的生命周期可分成三个状态：Mounting：已插入真实 DOMUpdating：正在被重新渲染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.Constructor2.componentWillmount3.render渲染4.componentDidMount第二阶段:1.componentWillReceiveProps2.shouldComponentUpdate3.componentWillUpdate4.Render()5.componentDidUpdate官网,不甚了解得可以上官网去瞅瞅:
https://zh-hans.reactjs.org/docs/handling-events.html

办公 探秘react教程20210331

办公探秘react教程20210331