react基础知识

最新推荐文章于 2023-06-08 23:18:53 发布

ʚ浅初.ɞ

最新推荐文章于 2023-06-08 23:18:53 发布

阅读量759

点赞数 1

分类专栏： react 文章标签：前端 react

本文链接：https://blog.csdn.net/qq_61195495/article/details/123811014

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、什么是react？

react是用于构建用户界面的JavaScript库

二、基本知识

1.新建文件夹

2.在文件夹新建index.html文件

3.打开命令行工具（Ctrl+`）

4. npm init -y 初始化package.json

5.npm install react react-dom安装两个依赖包

 <body>
    <!--1、 建立唯一的根元素div -->
    <div id="root"></div>
    <!-- 2、引入依赖包 -->
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>

    <script>
      // 3、创建要添加的元素
      const box = React.createElement("h1", null, "hello world");

      // 4、 把元素渲染到页面
      ReactDOM.render(box, document.getElementById("root"));
    </script>
  </body>

创建DOM元素：

React.createElement（“要创建的元素”，“标签的类名{className:"类名"}，没有就是null”，“标签的内容”）

渲染DOM元素：

ReactDOM.render（创建的DOM元素，document.getElementById("根元素")）

三、react脚手架

1.新建文件夹

2.打开命令行工具（Ctrl+`）

3.npm i create-react-app -g

4.npx create-react-app 项目名称

5.cd 项目名称

6.启动项目 npm

四、JSX语法

4.1基础介绍

JSX是javascript XMl的简写，它是一种 JavaScript 的语法扩展，react中来描述界面用这种语法更简洁。

JSX 语法的本质：并不是直接把 JSX 渲染到页面上，而是内部先转换成了 createElement 形式，再渲染的。

4.2语法基础

1.JSX 注释：推荐使用 {/* 这是注释 */}；

2.JSX中添加class类名：需要使用 className 来替代 class ；htmlFor 替代 label 的 for 属性；

3.在JSX创建DOM的时候，所有节点必须有唯一的根元素进行包裹；

4.在JSX语法中，标签必须成对出现，如果是单标签，则必须自闭和；

import React from "react";
import ReactDOM from "react-dom";

const box = (
  <h1>
    我是标题<span>我是里面的span元素</span>
  </h1>
);
ReactDOM.render(box, document.getElementById("root"));

4.3条件渲染和循环渲染

//导入两个依赖包
import React from 'react';
import ReactDOM from 'react-dom';

//创建元素
let num1 = 10;
let num2 = 20;
let score = 89;
let flag=true;
let fn = function(){
  if(score>= 80 && score <= 100){
    return "优秀";
  }else if(score >= 60 && score < 80){
    return "良";
  }else{
    return "不及格"
  }
};
let arr = [<span>111</span>,<span>222</span>,<span>333</span>];
let students = [
  {id:1,name:"tom",age:18},
  {id:2,name:"jim",age:19},
  {id:3,name:"jack",age:20},
];
let box = (
<div>
  <div>
    <p className='box'>{num1}</p>
    <p className='box'>{num1+num2}</p>
    <p className='box'>{flag == true ? "是":"否"}</p>
    <p className='box'>{fn()}</p>
    <p className='box'>{arr}</p>
  </div>
  <div>
    <div>
      {students.map(item=>(
        <div key={item.id}>
          <span>{item.id}</span>
          <span>{item.name}</span>
          <span>{item.age}</span>
        </div>
      ))}
    </div>
    <ul>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
    </ul>
  </div>
</div>
);
  
ReactDOM.render(box,document.getElementById("root"));

4.4样式操作

行内样式

const box = <p style={{ color: "red", fontSize: "40px" }}>111</p>;

添加类名样式

1.src下新建index.css文件

2.在文件中写入样式

3.在index.js中
const box = <p className="box">111</p>;

五、组件

5.1函数组件

函数组件的名称首字母必须大写
函数组件必须有返回值
箭头函数写法可以省略return

声明函数式写法

function Test() {
  return <div>我是第一个测试组件</div>;
}
ReactDOM.render(<Test />, document.getElementById("root"));

箭头函数写法

const Test = () => <div>我是第一个函数测试组件</div>;
ReactDOM.render(<Test />, document.getElementById("root"));

5.2类组件

类测试组件类名也是首字母大写
类组件中得有render函数
render函数中得有return返回值
extends继承React中的Componnet类，可以使用父类的一些属性和方法

class Test extends React.Component {
  render() {
    return <div>我是第一个类测试组件</div>;
  }
}
ReactDOM.render(<Test />, document.getElementById("root"));

5.3组件抽离

1.新建js文件

2.导出新建的js文件，在新建的js文件最后写 export default 文件名

3.在index.js中导入新建的js文件 import 文件名 from "文件路径"

4.渲染文件
ReactDOM.render(<文件名 />, document.getElementById("root"));

5.4组件中的事件处理

绑定事件：on+事件名=事件处理程序（驼峰命名）

函数创建组件

函数组件又成无状态组件,纯显示数据建议用函数组件

function App() {
  // 事件处理函数
  function handleClick() {
    console.log("被点击了");
  }
  return <button onClick={handleClick}>点击</button>;
}
ReactDOM.render(<App />, document.getElementById("root"));

类创建组件

类组件又称为有状态组件,页面数据不仅显示还会更新建议有类组件

class App extends React.Component {
  // 事件处理程序
  handleClick() {
    console.log("被点击了");
  }
  render() {
    return <button onClick={this.handleClick}>点击</button>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

六、state使用

state也就是状态，主要是保存组件内部的私有数据.

6.1状态的定义

class Test extends React.Component {
  state = {
    age: 18
  };
  render() {
    return <div>张三的年龄是{this.state.age}</div>;
  }
}

ReactDOM.render(<Test />, document.getElementById("root"));

6.2状态的更新

this.setState({xx:xx})

class Test extends React.Component {
  state = {
    age: 18
  };
  addAge() {
    this.setState({
      age: this.state.age + 1
    });
  }
  render() {
    return (
      <div>
        <div>张三的年龄是{this.state.age}</div>
        <button onClick={() => this.addAge()}>增加数据</button>
      </div>
    );
  }
}

ReactDOM.render(<Test />, document.getElementById("root"));

七、表单的处理

7.1文本框处理

表单元素绑定值用value属性，更改值用onChange事件

class Test extends React.Component {
  state = {
    name: ""
  };
  setName = e => {
    this.setState({
      name: e.target.value
    });
  };
  render() {
    return (
      <div>
        <input type="text" value={this.state.setName} onChange={this.setName} />
        <div>{this.state.name}</div>
      </div>
    );
  }
}

ReactDOM.render(<Test />, document.getElementById("root"));

7.2文本域处理

class Test extends React.Component {
  state = {
    content: ""
  };
  setContent = e => {
    this.setState({
      content: e.target.value
    });
  };
  render() {
    return (
      <div>
        <textarea
          value={this.state.content}
          onChange={this.setContent}
        ></textarea>
        <div>{this.state.content}</div>
      </div>
    );
  }
}

ReactDOM.render(<Test />, document.getElementById("root"));

7.3下拉菜单处理

class Test extends React.Component {
  state = {
    hobby: "敲代码"
  };
  chooseHobby = e => {
    this.setState({
      hobby: e.target.value
    });
  };
  render() {
    return (
      <div>
        <select value={this.state.hobby} onChange={this.chooseHobby}>
          <option value="读书">读书</option>
          <option value="看电影">看电影</option>
          <option value="敲代码">敲代码</option>
        </select>
      </div>
    );
  }
}

ReactDOM.render(<Test />, document.getElementById("root"));

7.4单选框和复选框

单选框和复选框是用checked属性不是value属性进行绑定

class Test extends React.Component {
  state = {
    isCheck: false
  }
  handleCheck = e => {
    console.log(e.target.checked);
    this.setState({
      isCheck: e.target.checked
    })
  }
  render() {
    return (
      <div>
        <input
          type="checkbox"
          checked={this.state.isCheck}
          onChange={this.handleCheck}
        />
      </div>
    );
  }
}

ReactDOM.render(<Test />, document.getElementById("root"));

八、组件传值

8.1props接受数据

props可以传递数字、字符串、数组、函数等很多数据类型
props是只读属性，不能更改对象

8.2父传子

父组件通过给子组件添加属性进行数据传递，子组件通过props进行数据接收

lass Son extends React.Component {
  render() {
    return (
      <div>
        <p>我是子组件{this.props.money}</p>
      </div>
    );
  }
}
class Parent extends React.Component {
  render() {
    return (
      <div>
        <p>我是父组件</p>
        <Son money={5000} />
      </div>
    );
  }
}
ReactDOM.render(<Parent />, document.getElementById("root"));

8.3子传父

子组件通过回调函数传递给父组件

class Son extends React.Component {
  state = {
    count: 10
  };
  handleClick = () => {
    this.props.sendMsg(this.state.count);
  };
  render() {
    return (
      <div>
        <p>我是子组件</p>
        <button onClick={this.handleClick}>点击发送数据给父组件</button>
      </div>
    );
  }
}
class Parent extends React.Component {
  state = {
    
  }
  getContent(data) {
    console.log(data);
  }
  render() {
    return (
      <div>
        <p>我是父组件</p>
        <Son sendMsg={this.getContent} />
      </div>
    );
  }
}
ReactDOM.render(<Parent />, document.getElementById("root"));

8.4兄弟传值

父组件统一管理多个子组件的状态

class Parent extends React.Component {
  state = {
    count: 10
  };
  addCount = () => {
    this.setState({
      count: this.state.count + 1
    });
  };
  render() {
    return (
      <div>
        <Child1 count={this.state.count} />
        <Child2 handle={this.addCount} />
      </div>
    );
  }
}
const Child1 = props => {
  return <div>子组件1:{props.count}</div>;
};
const Child2 = props => {
  return (
    <div>
      <button onClick={() => props.handle()}>点击数量+1</button>
    </div>
  );
};
ReactDOM.render(<Parent />, document.getElementById("root"));

九、组件的生命周期函数

1.组件初始化阶段

constructor()函数，创建组件的时候会自动执行，一般是在这里进行状态的初始化或者更改this的指向。

2.组件挂载阶段

render函数，每次渲染组件的时候都会调用这个函数，它主要是负责渲染页面结构的，主要不要在这个函数中调用this.setState()

componentDidMount函数，是组件挂载后执行，一般是在这个函数中执行对于DOM的操作和处理网络请求等。

3.更新阶段

render函数是渲染组件的时候触发
componentDidUpdate函数是更新state中的数据的时候触发

4.卸载阶段

componentWillUnmount是组件从页面卸载的时候触发

十、路由

1.安装指定包 npm install react-router-dom@5 --save

2.导入核心组件 import { BrowserRouter as Router,Route,Link} from "react-router-dom"

3.使用Router组件包裹整个应用

4.Link作为导航入口

5.配置路由出口

import './App.css';
//导入路由的依赖包
import { BrowserRouter as Router,Route,Link} from "react-router-dom"
//导入Home和News
import Home from './pages/Home';
import News from './pages/News';
//导入Home和News组件
function App() {
  return (
    <Router>
      <div className="App">
        <Link to="/home">首页</Link>
        <Link to="/news">新闻</Link>
        <Route path="/home" component={Home}></Route>
        <Route path="/news" component={News}></Route>
      </div>
    </Router>
  );
}

export default App;