标签：请求   end   sre   from   val   定时器   ext   urlencode   哈希   

react基础一

1. 组件三大属性

state

state 为组件的内部数据。类似 vue 中的 data；

注意：状态必须通过 setState进行更新。更新是合并，而不是替换。更新状态有两种方式。

// 对象方式
this.setState({
    count: this.state.count + 1
})
// 函数方式
this.setState(state => ({ count: this.state.count + 1 }))

props

prop 是外部传给组件的数据。

注意：引入 prop-types ，可以对传入的数据进行限制。

// 对外部传入的 name，sex，age 进行限制
static propTypes = {
    name:PropTypes.string.isRequired, //限制name必传，且为字符串
    sex:PropTypes.string,//限制sex为字符串
    age:PropTypes.number,//限制age为数值
}

ref

react组件通过组件标签的ref属性，获取DOM元素。共有三种方式：

• 方式一：字符串形式

export default class App extends Component {

  showData = ()=>{
    alert(this.refs.input1.value)  // 调用方式 this.refs.xxx
  }
  render(){
    return (
      <div>
        <input ref=‘input1‘ placeholder=‘点击按钮展示输入框的数据‘/>
        <button onClick={this.showData}>click</button>
      </div>
    )
  }
}

• 方式二：回调函数方式

export default class App extends Component {

  showData = ()=>{
    alert(this.input1.value) // 调用方式 this.xxx
  }
  render(){
    return (
      <div>
        <input ref={c => this.input1 = c} placeholder=‘点击按钮展示输入框的数据‘/>
        <button onClick={this.showData}>click</button>
      </div>
    )
  }
}

• 方式三：createRef 方式

export default class App extends Component {
// React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的
  ref1 = React.createRef()
  showData = ()=>{
    alert(this.ref1.current.value) // 调用方式 this.ref1
  }
  
  render(){
    return (
      <div>
        <input ref={this.ref1} placeholder=‘点击按钮展示输入框的数据‘/>
        <button onClick={this.showData}>click</button>
      </div>
    )
  }
}

2. react中的事件处理

1. react中使用的自定义的事件，而不是原生的DOM事件。例如：onClick（注意大小写）
2. react中的事件是通过事件委托方式处理的，委托给组件的最外层元素

3.受控组件和非受控组件

• 受控组件：受控组件就是被 react 状态控制的组件
• 非受控组件：在 react 中，input，textarea 等组件默认是非受控组件
• 非受控组件转化为受控组件：通过 onChange 事件获取到当前输入的内容，将当前输入的内容作为 value 传入

4. react 的生命周期

react 的生命周期分为三个阶段；

初始化阶段:

1. constructor()

2. getDerivedStateFromProps

3. render()

4. componentDidMount()： 一般做初始化事情：开启定时器、发送网络请求、订阅消息

更新阶段：

1. getDerivedStateFromProps
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate
5. componentDidUpdate()

卸载组件：由ReactDOM.unmountComponentAtNode()触发

1. componentWillUnmount()：一般做收尾工作：关闭定时器，取消订阅

5. react 的路由

首先说一下路由中基本概念：

1. 什么是路由组件和一般组件？

   • 路由组件: 一般这样写<Demo/>；存放在 pages 文件夹下；接收到的 props 为组件标签传递的的东西；
   • 一般组件：一般<Route path="/demo" component={Demo}/>；存放在 components 文件夹下；接收到的 props 为三个固定的属性：history，location，match

2. Switch 的作用？

   Switch 可以提高路由匹配效率，单一匹配

3. 路由的匹配方式：严格匹配和模糊匹配

默认是模糊匹配。路由组件上增加exact就是严格匹配。例如：<Route exact={true} path="/about" component={About}/>

注意：严格匹配不要顺便开启，可能会导致二级路由无法匹配的问题。

4. Redirect 的作用？

   一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由。

5. 嵌套路由

   注册子路由时，要写上父路由的 path 值。

6. 路由组件的参数传递

   1. params参数

      • 路由链接（传递参数）：<Link to=‘/demo/test/tom/18‘}>详情</Link>

      • 注册路由（声明接收）：<Route path="/demo/test/:name/:age" component={Test}/>

      • 接收参数：this.props.match.params

   2. search参数

      • 路由链接（传递参数）：<Link to=‘/demo/test?name=tom&age=18‘}>详情</Link>
      • 注册路由（无需声明）：<Route path="/demo/test" component={Test}/>
      • 接收参数：this.props.location.search
      • 备注：获取到的search是urlencoded编码字符串，需要借助querystring解析

   3. state参数

      • 路由链接（传递参数）: <Link to={{pathname:‘/demo/test‘,state:{name:‘tom‘,age:18}}}>详情</Link>

      • 注册路由（无需声明）：<Route path="/demo/test" component={Test}/>

      • 接收参数：this.props.location.state

7. BrowserRouter与HashRouter的区别

   1. BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。HashRouter使用的是URL的哈希值。
   2. 刷新后对路由state参数的影响?
      • BrowserRouter没有任何影响，因为state保存在history对象中。
      • HashRouter刷新后会导致路由state参数的丢失！

8. 编程式路由导航

   借助this.props.history对象上的API对操作路由跳转、前进、后退。

   例如：this.prosp.history.push()

9. withRouter 的作用

   withRouter可以加工一般组件，让一般组件具备路由组件所特有的API。

react基础

标签：请求   end   sre   from   val   定时器   ext   urlencode   哈希   

原文地址：https://www.cnblogs.com/lize520/p/14334796.html