react基础

/* eslint-disable */
import React,{Component} from ‘react’
// import {useState} from ‘react’
//用于判断外部传入的属性类型，第三方插件
// import PropTypes from ‘prop-types’

//外部传入
export default function Hello({age,name}){
console.log(‘props’,age,name)
// 必须要写return才行，这里的参数是解构出来的，原本是写形参props，然后输出props.age
return

{age,name}

}

class Hello extends Component{ 需要后面进行模块的暴露
render(){
console.log(“this”,this.props)
//进行解构赋值
const {age,name} = this.props
return

{age} - {name}

}
}

export default Hello

/* --------------------------------------------------------------------*/

//类组件自身定义
export default class Hello extends Component{
//类 有第二种props形式
static defaultProps = {
height:183
}
render(){
const {height,age} = this.props //这个必须写在函数内，在外部class里不可以写
return

{/* age 是外部传入的 */}
{height}-{age}

}
}

//对外部传入的属性进行类型的判断
Hello.propTypes ={
//类型要符合，否则就会报错
age:PropTypes.number,
name:PropTypes.string
}

/* --------------------------------------------------------------------*/

//类组件定义
export default class Hello extends Component{
constructor(props){
console.log(‘props’,props)//props {age: 18, name: “iron”}
super(props) //这里是继承props，也就是this.props = props
//状态定义形式一
// this.state = {
// count:0
// }
}
//状态定义形式二
state = {
count:0
}

render(){
    const {count} = this.state //进行解构
    return (
        <div>
            {/* 相当于{this.state.count} */}
            {count}
        </div>
    )
}

}

/* --------------------------------------------------------------------*/

//函数组件的state定义形式
export default function Hello() {
//这样定义的数据是双向数据的，可以随时改变
const [tel] = useState(133)
const [bol] = useState(true)
const [str] = useState(‘super’)
const [arr] = useState([1,2,3])

return (
    <div>
        {tel}<hr/>
        {bol?1:2}<hr/>
        {str}<hr/>
        {arr}
    </div>
)

}

/* --------------------------------------------------------------------*/

//类组件事件
export default class Hello extends Component {
constructor(props){
super(props)
this.hander = this.hander.bind(this)
}
//如果是一个普通函数，this指向的是undefined（当然在原生里，this应该输出这个hello类）要避免这种情况有两种方法：1.写事件 的时候bind绑定this ；2.在constructor里对事件重新定义
hander() {
console.log(“react事件”,this)
}

render(){
    return (
        <div>
            {/* 如果this.hander没有重新赋值，那么this是undefined */}
            <button onClick={this.hander}>普通事件</button>
            <button onClick={this.hander.bind(this)}>普通事件-bind绑定this</button>
        </div>
    )
}

}

/* --------------------------------------------------------------------*/

//事件定义用箭头函数
export default class Hello extends Component {

hander = () => {
    console.log("react事件",this)
}
render(){
    return (
        <div>
            {/* 箭头函数事件，直接可以输出this，为hello组件 */}
            <button onClick={this.hander}>箭头普通事件</button>
        </div>
    )
}

}

/* --------------------------------------------------------------------/
/
* React中事件绑定的事件类型要求是大写,要在开头用on
* Click
* KeyDown
* MouseOver
* React中的事件【绑定在jsx上的】属于合成【封装】事件
* React中事件的事件对象
* React e 是类，是封装的一个类，但是里面东西和原生事件e是一样的，但是输出的时候显示的内容不一样，单独输出一个属性是一样的
* React中事件的传参
* 如果是普通函数，建议使用bind来做传参，也可以使用外面包裹箭头函数，这样就不需要使用bind绑定this
* 如果你是箭头函数，在调用这个箭头函数 时，在它的外层包裹一层箭头函数
*/

/* --------------------------------------------------------------------*/

//类组件传参
export default class Hello extends Component {
//箭头函数传参
hander =(e) =>{
console.log(‘hander’,e.pageX)
}
//普通函数传参
arghander(n) {
console.log(‘arg’,n)
}
//箭头函数传参
argumenthander = n =>{
console.log(‘argument’,n)
}

render(){
    return (
        <div>
            <button onClick={this.hander}>箭头函数事件</button>
            <button onClick={this.arghander.bind(this,10)}>普通事件bind传参</button>
            {/* 传参的话，普通函数可以不写bind绑定this */}
            <button onClick={() =>{this.arghander(10)}}>普通事件传参</button>
            {/* 箭头函数传参，不能直接在小括号内传参，否则不需要触发这个事件就激活了，应该写在函数内 */}
            <button onClick={() =>{this.argumenthander(10)}}>箭头函数传参</button>
        </div>
    )
}

}

/* --------------------------------------------------------------------*/

//函数传参
export default function Hello() {
function hander(e){
console.log(‘hander’,e.pageX)
}
//函数传参
function argumenthander(n){
console.log(‘argument’,n)
}
return (

函数事件
{/* 不能直接在小括号内传参，否则不需要触发这个事件就激活了，应该写在函数内 */}
<button onClick={() =>{argumenthander(10)}}>函数传参

)
}

/* --------------------------------------------------------------------*/

//类组件改变状态
export default class Hello extends Component{
//定义状态
state = {
count:0
}
increment = ()=>{
//react里更改类组件的状态必须使用setState
// console.log(this.state.count)
// //setState写法一 -同步的方法
// this.setState({
// count:++this.state.count
// })
//setState写法二 -异步的方法,在第一个参数的位置写回调函数，回调函数都是异步的 ,这里的{count}是解构，原本是this.state.count
// this.setState(({count}) =>{
// return {
// count:++count
// }
// })
//setState里可以写两个参数，第二个参数可以使用修改好的最新的状态
//比如说修改网站title，保持数据的变化
this.setState(({count}) =>{
return {
count:++count
}
},() =>{
//这里可以获取最新的状态
document.title = this.state.count
})
}
render(){
const {count} = this.state
return (

+

{count}

)
}
}

/* --------------------------------------------------------------------*/

//函数改变状态
//函数改变状态需要使用setCount，名称可改
export default function Hello(){
let [count,setCount] = useState(0)

function increment(){
    //直接点击赋值的
    // setCount(1)
    //点击增加
    setCount(newcount => newcount + 1)
}

return (
    <div>
        <button onClick={increment}>+</button>
        <p>{count}</p>
    </div>
)

}

/* --------------------------------------------------------------------*/

// 合并
export default class Hello extends Component {
constructor (props){
super(props)
this.state = {count:0}
}
increment = () =>{
//同一个方法在短时间内多次调用setState，为了性能的优化，react会将多次的setState合并为一个，进行统一的处理
for(let i=0;i<100;i++){
this.setState({
count:++this.state.count
})
}
}

render() {
    const {count} = this.state
    return (
        <div>
            <button onClick={this.increment}>+</button>
            <p>{count}</p>
        </div>
    )
}

}

/* --------------------------------------------------------------------*/

//数据渲染
export default class Hello extends Component {
state = {
money:1000,
xml:‘

xml数据

’,
flag:true,
todos:[{
id:1,
task:“任务一”
},
{
id:2,
task:“任务二”
},
{
id:3,
task:“任务三”
}]
}
changeFlag = () =>{
this.setState({
flag:!this.state.flag
})
console.log(this.state.flag)
}
rendertodos = ()=>{
return this.state.todos.map(item =>

• {item.task}
• )
  }

  render(){
      const{money,xml,flag,todos} = this.state
      // if(!flag) return <div>加载中...</div>
      return (
          <div>
              1.数据展示<hr/>
              <p>{money}</p>
              {/* 类似于v-html，可以解析标签 */}
              <div dangerouslySetInnerHTML={{__html:xml}}></div><hr/>
  
              2.条件展示<hr/>
              <button onClick={this.changeFlag}>changeflag</button>
              <p> {flag?'真':'假'} </p>
              {/* 可以加标签，这个会识别标签 */}
              <p> {flag?<span>'真'</span>:<span>'假'</span>} </p>
              {/* 逻辑短路 */}
              <p> {flag && "真" || "假"} </p>
  
              3.列表渲染<hr/>
              {/* 数组map的返回值是一个新数组 */}
              <ul>
                  {this.rendertodos()}
              </ul>
          </div>
      )
  }
  

  }