提示：文章内容较为简洁，建议你对vue或者前端语言有一定了解的情况下再阅读，就很通俗易懂了，本文章内容将不断更新，助你快速入门React。

提示：以下是本篇文章正文内容，下面案例可供参考

一、React生命周期

二、路由的使用

// index.js
import {
    
     BrowserRouter } from "react-router-dom";

<BrowserRouter>
      <App />
</BrowserRouter>


//App.js
import {
    
     Routes, Route, Link } from "react-router-dom";

#所有路由
<Routes>
          <Route path=“/” element={
    
    <Home />} />    
          <Route path=“about" element={
    
    <About />} />
</Routes>

三、路由跳转

基本使用（示例）：

<Link to="/about">About</Link> 

<Link to={
    
    {
    
    pathname:"/findScore",state:{
    
    }}}>查询成绩</Link>

四、使用Switch

import {Route,Redirect,Switch} from 'react-router-dom'
       {/* 
          Switch可以提高路由匹配效率(单一匹配)。
      */}
        <Switch>  
            <Route path="/insetScore" component={AddStudent}/>
            <Route path="/findScore" component={Message}/>
            <Route path="/getAllScore" component={AllStudent}/>
            {/* 一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由 */}
            <Redirect to="/insetScore"/>
        </Switch>

五、路由组件接收到三个固定的属性

（示例）：

history:
	go: ƒ go(n)
	goBack: ƒ goBack()
	goForward: ƒ goForward()
	push: ƒ push(path, state)
	replace: ƒ replace(path, state)
location:
	pathname: "/about"
	search: ""
	state: undefined
match:
	params: {
    
    }
	path: "/about"
	url: "/about"

六、三目运算符控制显示

// 显示不同内容   {this.state.showWarning ? '隐藏' : '显示'}

// 显示不同样式   className={this.state.display?"active":"active1"}

七、 点击事件

<button  onClick={this.handleToggleClick}></button>

八、 参数传递

 //state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

constructor(props) {
        super(props);
        this.state = { showWarning: true, name: 'test' }         
    }

function WarningBanner(props) {
    if (!props.warn) {
        return null;
    }

    return (
        <div className="red">
            警告!
        </div>
    );
}

// 引用
<WarningBanner warn={this.state.showWarning} />

九、 表单，输入监听

 handleChange(event) {
        this.setState({ namesf: event.target.value });
 }

 <input type="text" value={this.state.name} onChange={this.handleChange} ></input>
 {this.state.name}

十、 如何创建 refs

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <p ref={this.myRef}  />;
  }
}

十一、 数据遍历

 this.state =  {persons:[{name:'AAA',age:'18'},{name:'BBB',age:'18'},{name:'CCC',age:'18'}]}

function  view (){
		const listItems = this.state.persons.map((item,index) =>
		       <Person name={item.name} age={item.age} key={index} />
		     );
		     
		return(
		      <div className="App">
		             {listItems}
		      </div>
		)    
}