React【基础2】

一、随机数效果

最终效果

index.js页面

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Parent extends Component{
  state={
    number:0
  }
  changeNumber(){
    this.setState({
      number:Math.floor(Math.random()*10)
    })
  }
  render(){
    return(
      <div>
        计数器：{this.state.number}
        <button onClick={this.changeNumber.bind(this)}>change</button>
      </div>
    )
  }
}

ReactDOM.render(
    <Parent />,
  document.getElementById('root')
);

其他问题效果

最终效果

不切换数字不执行render里面的代码，为的是加快页面执行速度

index.js文件

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Parent extends Component{
  state={
    number:0
  }
  changeNumber(){
    this.setState({
      number:Math.floor(Math.random()*2)
    })
  }
  shouldComponentUpdate(nextprops,nextState){
    if(this.state.number !== nextState.number){
      return true
    }
    return false
  }
  render(){
    console.log('render');
    return(
      <div>
        计数器：{this.state.number}
        <button onClick={this.changeNumber.bind(this)}>change</button>
      </div>
    )
  }
}

ReactDOM.render(
    <Parent />,
  document.getElementById('root')
);

二、组件中判断是否需要重新渲染

运行效果

index.js文件

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Parent extends Component{
  state={
    number:0
  }
  changeNumber(){
    this.setState({
      number:Math.floor(Math.random()*2)
    })
  }
  shouldComponentUpdate(nextprops,nextState){
    if(this.state.number !== nextState.number){
      return true
    }
    return false
  }
  render(){
    console.log('render');
    return(
      <div>
        计数器：{this.state.number}
        <button onClick={this.changeNumber.bind(this)}>change</button>
        <NumberBox  number={this.state.number}/>
      </div>
    )
  }
}
// 子组件
class NumberBox extends Component{
  shouldComponentUpdate(nextProps,nextState){
    if(this.props.number!==nextProps.number){
      return true
    } 
    return false
  }
  render(){
    console.log('NumberBox');
    return <h1>子组件：{this.props.number}</h1>
  }
}

ReactDOM.render(
    <Parent />,
  document.getElementById('root')
);

三、简单路由的实现

1.路由实现

运行效果

需要安装需要的路由

npm install react-router-dom

index.js文件使用路由

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'

class App extends Component{
  render(){
    return(
      <Router>
        <div className="app">
          <nav>
            <ul>
              <li>
                <Link to="/first">组件1</Link>
              </li>
              <li>
                <Link to="/second">组件2</Link>
              </li>
            </ul>
          </nav>
          <div className="content">
            <Route path="/first" exact component={First} />
            <Route path="/second" exact component={Second} />
          </div>
        </div>
        
      </Router>
    )
  }
}
const First = ()=>{
  return <p>First</p>
}
const Second = ()=>{
  return <p>Second</p>
}
ReactDOM.render(
  <App />,document.querySelector('#root')
)

2.组件说明

• Router组件：包裹整个应用，一个React应用只需要使用一次
  • 两种常用的Router：HashRouter和BrowserRouter
  • HashRouter：使用URL的哈希值实现（localhost:3000/#/first）
  • 推荐BrowserRouter：使用H5的history API实现（localhost:3000/first）
• Link组件：用于指定导航链接（a标签）
  • 最终Link会编译成a标签，而to属性会被编译成a标签的href属性
• Route组件：指定路由展示组件相关信息
  • path属性：路由规则，这里需要跟Link组件里面to属性的值一致
  • component属性：展示的组件
  • Route写在哪，渲染出啦的组件就在那。

四、编程式导航

index.js文件

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'

class App extends Component{
  render(){
    return(
      <Router>
        <div className="app">
          <nav>
            <ul>
              <li>
                <Link to="/first">组件1</Link>
              </li>
              <li>
                <Link to="/second">组件2</Link>
              </li>
            </ul>
          </nav>
          <div className="content">
            <Route path="/first" exact component={First} />
            <Route path="/second" exact component={Second} />
          </div>
        </div>
        
      </Router>
    )
  }
}
const First = ()=>{
  return <p>First</p>
}
const Second = (props)=>{
  function gotoFirst() {
    props.history.push('/first')
  }
  return(
    <div>
      <p>Second</p>
      <button onClick={gotoFirst.bind(this)}>first</button>
    </div>
  )
}
ReactDOM.render(
  <App />,document.querySelector('#root')
)

1.精准匹配

• 默认路由认可情况下都会展示，如何避免这种问题？》
• 给Route组件添加exact属性，让其变为精准匹配模式
• 精准匹配：只有当path和pathname完全匹配时才会展示改路由

url 值匹配上几个路由规则，就会在页面中展示几个路由规则对应的组件

2.小结

• React路由可以有效的管理多个视图实现 SPA
• 路由先需要通过安装
• Router组件包裹整个应用，只需要使用一次
• Link组件是入口，Route组件是出口
• 通过props.history实现编程式导航
• 默认是模糊匹配，添加exact编程精准匹配
• React路由的一切都是组件，可以像思考组件一样思考路由

五、命令行导入sql文件

1. win+R打开cmd

   

2. 切换到F盘下

   F:回车

   

3. cd newphpstudy\phpstudy_pro\Extensions\MySQL5.7.26\bin

   

4. 敲入命令建立数据库连接

   .\mysql -u root -p

   

5. 输入密码

   

6. 敲入命令进入到提前创建好的数据库名称

   use 51zf

   

7. 导入在bin文件下的sql文件

   source 51zf.sql