React 入门篇

彭式程序猿

已于 2022-09-16 23:12:37 修改

阅读量238

点赞数 2

分类专栏： React 文章标签： react.js javascript 前端

于 2022-09-11 10:52:30 首次发布

本文链接：https://blog.csdn.net/weixin_43523043/article/details/126803069

版权

React 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了React的基础知识，包括组件生命周期管理、使用BrowserRouter进行路由设置，Switch的高效路由匹配，以及关键操作如路由跳转、参数传递、表单监听等实战技巧。同时涵盖了创建refs和数据遍历的方法。

摘要由CSDN通过智能技术生成

提示：文章内容较为简洁，建议你对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>
		)    
}