React基础知识点

最新推荐文章于 2024-06-20 11:37:20 发布

战斗脸子.

最新推荐文章于 2024-06-20 11:37:20 发布

阅读量172

点赞数

文章标签： reactjs

本文链接：https://blog.csdn.net/SupermeDCQ/article/details/110739159

版权

什么是React？
React 是一个用于构建用户界面的 JavaScript 库
如何使用 React
基于浏览器模式
（一）引入react.js : react.js提供react的核心功能代码如：虚拟dom 组件

React.createElement(type,props,children);

type ：类型（也就是标签）
props：属性（id、class、style…）
chidren: 可以写标签也可以写内容

//第一种方法

<script>
        ReactDOM.render(
            React.createElement("h1",null,"我是一个标签"),
            document.querySelector("#root"),
            //回调函数 如有需求可以往里面写  没有的话可以删除
            ()=>{
                console.log("渲染成功")
            }
        )
    </script>

//第二种方法
        let h1 = React.createElement("h1", null, "我是一个标签")
        let p = React.createElement("p", null, "我是一个段落")
        let el = React.createElement(
            "header",
            {
                id: "header"
            },
            h1,
            p
        )
        ReactDOM.render(
            el,
            document.querySelector("#root"),
            //回调函数 如有需求可以往里面写  没有的话可以删除
            () => {
                console.log("渲染成功")
            }
        )

（二）引入react-dom.js: react-dom.js提供了与浏览器交互的DOM功能如：dom 渲染

ReactDOM.render(element, container[, callback])

element：要渲染的内容
container：存放内容的容器
callback：渲染后的回调函数
<div id="root"></div>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script>
        /*
            React.js 提供 核心代码
            ReactDOM 提供了与浏览器交互的DOM功能， 如 虚拟DOM
        
        */
        ReactDOM.render(
            "今天天气不错",
            document.querySelector("#root"),
            //回调函数 如有需求可以往里面写  没有的话可以删除
            ()=>{
                console.log("渲染成功")
            }
        )
    </script>

JSX
JSX: 基于javaScript 和 Xml 的扩展语法
在JSX使用之前需要在文件内引入babel.js 并且将script中的type改为啊"text/babel" 然后才能将数据渲染到页面中

<script src="./js/babel.js"></script>

<script type="text/babel">
    /*
        JSX:  基于javaScript 和 Xml 的扩展语法
    */
    ReactDOM.render(
        <header>
            <h1>hello react</h1>
            <p>利用JSX来渲染</p>     
        </header>,
        document.querySelector("#root"),
        //回调函数 如有需求可以往里面写  没有的话可以删除
        () => {
            console.log("渲染成功")
        }
    )
</script>

插值表达式
各种类型内容在插值中的使用
注释 {/注释/} {/* 多行注释 */}
输出数据类型
字符串、数字：原样输出
布尔值、空、未定义会被忽略
列表渲染
数组
对象扩展：虚拟 DOM （virtualDOM）和 diff

//各种数据的插值状态

    // let str = "天气还不错" // 原样输出
    // let data = 1 //原样输出
    // let data = false //不输出
    // let data = undefined //不输出
    // let data = null //不输出
    // let data = ['内容1,','内容2,','内容3'] // 没有，原样输出
// 对象需要单独输出上去
let data={
    name:'白悠悠',
    age:18
}

条件渲染
三元运算符

//条件输出
    ReactDOM.render(
        <header>
            <h1>{true?"成立":"不成立"}</h1>
            <p>利用JSX来渲染</p>     
        </header>,
        document.querySelector("#root"),
        //回调函数 如有需求可以往里面写  没有的话可以删除
        () => {
            console.log("渲染成功")
        }
    )
与或运算符
// ?  :     类似于      if...else
// ||       类似于      if(!) 取反
// &&       类似于      if()

列表循环
let data = [
        "内容1",
        "内容2",
        "内容3",
        "内容4"
    ]
//第一种方法
    function toData() {
        let arr = []
        data.forEach(item => {
            arr.push(<li>{item}</li>)
        })
        return arr
    }

    ReactDOM.render(
        <header>
            {toData()}
        </header>,
        document.querySelector("#root"),
        //回调函数 如有需求可以往里面写  没有的话可以删除
        () => {
            console.log("渲染成功")
        }
    )

//第二种方法
    ReactDOM.render(
        <header>
            <ul>
                {
                    data.map(item => {
                        return <li>{item}</li>
                    })
                }
            </ul>
        </header>,
        document.querySelector("#root"),
        //回调函数 如有需求可以往里面写  没有的话可以删除
        () => {
            console.log("渲染成功")
        }
    )

JSX注意事项：

它可以作为值使用
它并不是字符串
它也不是html
它可以配合JS 表达式一起使用
它不可以和JS 语句一起使用
所有的标签名必须是小写
所有的标签必须闭合，哪怕是单标签
class 要写做 className - style 接收的是一个对象，并不是字符串
每次只能输出一个标签(或者说必须要有一个容器)
唯一父级/唯一容器
也可以换成Fragment，可以不在页面显示

let style = {
        width:'200px',
        height:'200px',
        background:'red'
    }
ReactDOM.render(
        // <div>
        //    <div className="box" style={{width:"400px",height:"300px"}				}></div>
        // </div>,
        <div>
            <div className="box" style={style}></div>
        </div>,
        document.querySelector("#main"),
    )

基于自动化的集成环境模式 - create-react-app - 脚手架
介绍
Create React App 是一个使用 Node.js 编写的命令行工具，通过它可以帮助我们快速生成 React.js 项目，并内置了 Babel、Webpack 等工具帮助我们实现 ES6+ 解析、模块化解析打包，也就是通过它，我们可以使用模块化以及 ES6+ 等更新的一些特性。同时它还内置 ESLint 语法检测工具、Jest 单元测试工具。还有一个基于 Node.js 的 WebServer 帮助我们更好的在本地预览应用，其实还有更多。

安装与使用
通过 npm、yarn、npx 都可以
安装
npm

npm i -g create-react-app

yarn

yarn global add create-react-app

使用
安装完成以后，即可使用 create-react-app 命令

create-react-app <项目名称>

组件
对具有一定独立功能的数据与方法的封装，对外暴露接口，有利于代码功能的复用，且不用担心冲突问题。

函数式组件
函数的名称就是组件的名称
函数的返回值就是组件要渲染的内容
类式组件
组件类必须继承 React.Component
组件类必须有 render 方法
render 方法的 return 后，定义组件的内容

ps：都要记得导出

在index.js中绑定容器
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
import App from ‘./App’;

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
定义根组件，绑定需要引入的组件
import React,{Component} from 'react'
import FriendList from './FriendList'
/*
  1.组件类必须继承 React.Component
  2.组件类必须有 render 方法
  3.render 方法的return后 定义组件的内容
ps:记得导出
*/

class App extends Component {
  render(){
    return (
      <div>
        <FriendList/>
      </div>
      )
  }
}
export default App;
根组件定义内容

import React,{Component} from 'react'
import './FriendList.css'
class FriendList extends Component {
  render(){
    return (
      <div className="friend-list">
          <div className="friend-group">
              <dt>家人</dt>
              <dd>爸爸</dd>
              <dd>妈妈</dd>
          </div>
          <div className="friend-group">
              <dt>朋友</dt>
              <dd>张三</dd>
              <dd>李四</dd>
              <dd>王五</dd>
          </div>
          <div className="friend-group">
              <dt>客户</dt>
              <dd>阿里</dd>
              <dd>腾讯</dd>
              <dd>头条</dd>
          </div>
        </div>
      )
  }
}

export default FriendList;

事件
什么是事件
React 的事件处理和 DOM 元素类似。但是语法上是不同的:
1.React 事件绑定属性时采用驼峰命名法，而不是小写。
2.如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)
事件的写法
HTML中的写法

<button onClick="addAge()">点我啊</button>

JSX中的写法

<button onClick={this.addAge}>点我啊</button>

也可以拉出去写个函数

class App extends Component {
  state = {
    nub : 20,
    name:'亚峰',
    sex:'胖子'
  }
  // add =()=>{
  //   console.log(this)
  // }
  render(){
    let {nub} = this.state
    return (
      <div>
        <p>{this.state.sex}</p>
        <p>{this.state.nub}</p>
        <button onClick={()=>{
          this.setState(
            {nub:nub+1,sex:'可爱得胖子'}
          )

        }}>长一岁</button>

      </div>
      )
  }
}

state是什么
state——组件自身状态
state与props的区别是什么
1.state 的主要作用是用于组件保存、控制、修改自己的可变状态，在组件内部进行初始化，也可以在组件内部进行修改，但是组件外部不能修改组件的 state
2.props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件，它是外部传进来的配置参数，组件内部无法控制也无法修改
3.state 和 props 都可以决定组件的外观和显示状态。通常，props 做为不变数据或者初始化数据传递给组件，可变状态使用 state

父子组件
将父组件的方法或者状态在子组件入口传进去，在子组件里可直接在this.props中获取使用。
父组件父组件通过属性把值传递到子组件里面去

class FriendList extends Component {
  state = {
    isOpen:"" //哪一项是展开的
  }
  //传递给子组件，点击哪个子组件，子组件就将自身的name传参过来
  changeOpen = (name)=>{
    this.setState({isOpen:name})
  }

  render(){
    let {isOpen} = this.state
    return (
      <div className="friend-list">
          {
            Object.keys(data).map((item,index)=>{
              return (
              <Dl 
                key = {index}
                name = {item}
                  value = {data[item]}
                  isOpen = {isOpen}
                  changeOpen = {this.changeOpen}
              />)
            })
          }
      </div>
      )
  }
}

子组件子组件就是通过父组件定义好的回调函数传到子组件里，子组件里的值在通过回调函数，返回到父组件里

export default class Dl extends Component{
    // state = {
    //     isOpen : true
    // }
    render(){
        console.log(this.props)
        let {title,list} = this.props.value
        // name : 自身数据的属性名
        // isOpen : 哪一项需要展开
        let {name,isOpen,changeOpen} = this.props
        // let {isOpen} = this.state
        return(
            <div className={"friend-group" + (name==isOpen?" expanded":"")}>
              <dt onClick={()=>{
                  changeOpen(name)
                  
              }
                  
              }>{title}</dt>
              {
                  list.map((item,index)=>{
                  return <dd key={index}>{item.name}</dd>
                  })
              }
             
            </div>

        )
    }
}

props 和 state
props 父组件传递过来的参数
state 组件自身状态

state 和 setState
setState(updater, [callback])
updater: 更新数据 FUNCTION/OBJECT
callback: 更新成功后的回调 FUNCTION
异步:react通常会集齐一批需要更新的组件，然后一次性更新来保证渲染的性能
浅合并 Objecr.assign()