[JavaScript知识库]React相关笔记文档

2021-10-22

在JSX中嵌入表达式

1.将表达式作为内容的一部分

? （1）nulll,undefined,false不会显示

? （2）普通对象，不可以作为子元素

? （3）可以放置React元素对象

2.将表达式作为元素属性

const div = (
  <div>
    <img src={url} className={cls} alt="" 
	style={{marginLeft:"50px",width:"200px"}} />
  </div>
)

ReactDOM.render(
  div, document.getElementById('root')
);

3.属性使用小驼峰命名法

4.防止注入攻击

? （1）自动编码(不会判断h1标签)

const content = "<h1>sdadwdwdwsdsa</h1>"
const div = (
  <div>
   {content}
  </div>
)
ReactDOM.render(div, document.getElementById('root'));

? （2）dangerouslySetInnerHTML（若想判断输入的关键字，就改变成当前模式进行输入）

const content = "<h1>sdadwdwdwsdsa</h1>"
const div = (
  <div dangerouslySetInnerHTML={{
    __html:content
  }}>
  </div>
)
ReactDOM.render(div, document.getElementById('root'));

元素的不可变性

1.虽然JSX元素是一个对象，但是该对象中的所有属性不可更改（会提示报错，read only）

测试代码如下：

const div = (
  <div>1</div>
)
console.log(div)
div.props.children = 2
console.log(div)
ReactDOM.render(div, document.getElementById('root'));

2.如果确实需要更改元素的属性，需要重新创建JSX元素

let num = 0
setInterval(() => {
  num++;
  const div = ( <div>{num}</div>  )
  ReactDOM.render(div, document.getElementById('root'));
}, 1000)

Dom练习（轮播图效果）

import src1 from './assets/1.jpg'
import src2 from './assets/2.jpg'
import "./index.css"
const srcs = [src1, src2]  //保存期图片的路径
let index = 0 //显示的图片的索引
let timer  //这个是一个计时器
// 根据index的值显示某张图片
const container = document.getElementById('root')
function render() {
  ReactDOM.render(<img src={srcs[index]} alt="" style={{ width: "100%", height: "100%" }} />, container);
}
// 定义一个方法是计时器，每隔一段时间就开始切换
function start() {
  stop()
  timer = setInterval(() => {
    index = (index + 1) % 2
    render();
  }, 2000)
}
// 加一个停止计时的效果，以便后续进行处理其该函数
function stop() {
  clearInterval(timer)
}
render()
start()
//鼠标移入的事件
container.onmouseenter =function(){
  stop()
}
//鼠标移出的事件
container.onmouseleave = function(){
  start()
}

React组件和组件属性

组件：包含内容，样式和功能的UI单元

1.如何创建一个组件

组件的名称首字母必须进行大写

（1）函数组件

返回一个React元素（首字母必须要大写，否则其react会认为他只是一个普通组件，并不是元素组件）

import React from 'react';
import ReactDOM from 'react-dom';
function MyfuncCommit(){
  return <h1>组件表达式</h1>
}
ReactDOM.render(<div><MyfuncCommit/></div>, document.getElementById("root"));

（2）类组件

必须继承React.Component

必须提供render函数，用于渲染组件

import React from 'react'
export default class MyclassComp extends React.Component{
    // 该方法必须返回React元素
    render(){
        return <h1>类组件的内容</h1>
    }
}

2.组件的属性

（1）对于函数组件，属性会作为一个对象的属性，传递给函数的参数

import React from 'react';

export default function MyFuncomp(props){
    return <h1>函数组件的内容，函数组件的数字为：{props.number}</h1>
}

（2）对于类组件，属性会作为一个对象的属性，传递给构造函数的参数

import React from 'react'
export default class MyclassComp extends React.Component{
    // 该方法必须返回React元素
    render(){
        return <h1>类组件的内容,{this.props.number}</h1>
    }
    // constructor(props){
    //     super(props);//this.porps = props
    //     console.log(props)
    // }
}

注意：组件的属性，应该使用小驼峰命名法

（3）组件无法改变自身的属性(会报错)

import React from 'react'
export default class MyclassComp extends React.Component{

    this.props.number = 10; 


    // 该方法必须返回React元素
    render(){
        return <h1>类组件的内容,{this.props.number}</h1>
    }
    // constructor(props){
    //     super(props);//this.porps = props
    //     console.log(props)
    // }
}

React的哲学：数据属于谁，谁才有权利改动

React的数据是自顶而下进行流动的