学习React

最新推荐文章于 2024-03-07 21:43:51 发布

_小婷子

最新推荐文章于 2024-03-07 21:43:51 发布

阅读量179

点赞数

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

Ting

本文链接：https://blog.csdn.net/weixin_46722764/article/details/118727869

版权

前端同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

React

2 篇文章 0 订阅

订阅专栏

React 基础

1.先引入三个包：
react.development.js
react-dom.development.js
babel.min.js

2.创建一个容器

3.创建虚拟DOM，渲染到容器中

<body>
    <!-- 准备好容器 -->
    <div id="test"></div>
</body>
<!-- 引入依赖 必须按照这个步骤-->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

<!--这里使用了babel用来解析jsx语法-->
<script type="text/babel">
        // 1.创建虚拟DOM
        const VDOM = <h1>Hello</h1>  //这个地方使用的是JSX语法，不需要加""
        // 2.渲染，如果有多个渲染同一个容器，后面的会将前面的覆盖掉
        ReactDOM.render(VDOM,document.getElementById("test"));        
</script>
</html>

JSX基础语法：

1.定义虚拟DOM，不能使用“”

2.标签中混入JS表达式的时候使用{}

3.样式的类名指定不要使用class，使用className(防止与js关键子class冲突)

4.内敛样式要使用双大括号包裹

5.不能有多个根标签，只能有一个根标签

6.标签必须闭合

7.如果小写字母开头，就将标签转化为html同名元素，如果html中无该标签对应的元素，就报错；如果是大写字母开头，react就去渲染对应的组件，如果没有就报错

组件

1.函数式组件

//1.先创建函数，函数可以有参数，也可以没有，但是必须要有返回值 返回一个虚拟DOM
function Welcome() {
  return <h1>Hello</h1>;
}
//2.进行渲染
ReactDOM.Render(<Welcome />,document.getElementById("div"));

2.Class组件

//必须继承React.Component
//然后重写Render()方法，该方法一定要有返回值，返回一个虚拟DOM
class Welcome extends React.Component {
  render() {
    return <h1>Hello</h1>;
  }
}
//渲染 【这个跟之前也是一样的】
ReactDOM.Render(<Welcome />,document.getElementById("div"));

组件实例的三大属性

state:保存状态值，值是对象
this.setState():修改state的值

<body>
<div id="app"></div>
</body>
</html>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    //类组件
    class MyComponent extends React.Component{
        //直接写赋值语句,值直接赋值给实例
        state={
            isHot:true
        }
        render(){
            const {isHot}=this.state
            return <h2 onClick={this.change}>今天天气很{isHot ? '炎热' : '凉爽'}</h2>
        }
        //自定义方法  箭头函数不用担心this指向，this是外侧组件的this
        change=()=> {
            let isHot=this.state.isHot;
            this.setState({
                isHot:!isHot
            });
        }
    }
    ReactDOM.render(<MyComponent/>,document.querySelector('#app'))

    //绑定方法：
    //不传参数 onClick={demo}

</script>

Props:主要用来传递数据，比如组件之间进行传值

函数式组件传参

<body>
<div id="app"></div>
</body>
</html>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<!--prop-types.js限制传参类型-->
<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.7.2/prop-types.js"></script>
    <script type="text/babel">
    //函数组件 可接受参数
    function MyComponent(props){
        console.log(props)
        const {name,age,sex}=props //props是只读的
        return (
            <ul>
                <li>{name}</li>
                <li>{age+1}</li>
                <li>{sex}</li>
            </ul>
        )
    }
     //设置props的规则:propTypes
    MyComponent.propTypes={
        name:PropTypes.string.isRequired,//现在引入prop-types.js
        sex:PropTypes.string,
        age:PropTypes.number,
        speak:PropTypes.func//防止与关键子function冲突
    }
     //设置props默认值:defaultProps
    MyComponent.defaultProps={
        sex:"男",
        age:18
    }
    const p={name:'Alis'}
    ReactDOM.render(<MyComponent {... p}/>,document.querySelector('#app'))
</script>

Class组件

<body>
<div id="app"></div>
</body>
</html>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.7.2/prop-types.js"></script>
<script type="text/babel">
    class Person extends React.Component{
        render(){
            const {name,age,sex}=this.props //props是只读的
            return (
                <ul>
                    <li>{name}</li>
                    <li>{age+1}</li>
                    <li>{sex}</li>
                </ul>
            )
        }
        //static 直接赋值在自身上
        static propTypes={
            name:PropTypes.string.isRequired,//现在引入prop-types.js
            sex:PropTypes.string,
            age:PropTypes.number,
            speak:PropTypes.func//防止与关键子function冲突0
        }
        static defaultProps={
            sex:"男",
            age:18
        }

    }
    const p={name:'Alis',age:11,sex:'女'}
    ReactDOM.render(<Person {...p} />,document.querySelector('#app'))
</script>

Refs:允许访问 DOM 节点或在 render 方法中创建的 React 元素

字符串的ref：ref="input"放在refs里面，用 this.refs.input获取 ,官方：效率不高不推荐

 <input onBlur={this.showData} type="text" placeholder="失去焦点提示数据" ref="input"/>
   showData=()=>{
     const {input}=this.refs
     console.log(input.value)
   }

回调函数： ref={(currentNode)=>{console.log(currentNode) this.input=currentNode}} 直接放在实例身上用this.input调用

 <input type="text" placeholpder="失去焦点提示数据"  ref={c=>this.input3=c} onBlur={this.showData3}/>
 showData3=()=>{
   	const {input3}=this;
    console.log(input3.value)
 }

注：如果以内联的方式定义，在更新的过程中会执行两次，第一次是null，第二次才是真正的DOM元素可以赋值函数写 ref={this.saveInput} 在函数里赋值给实例

 <input type="text" placeholder="失去焦点示数据"  ref={this.saveInput} onBlur={this.showData4} />
 saveInput=(c)=>{
      this.input4=c;
 }
 showData4=()=>{
    const {input4}=this;
    console.log(input4.value)
 }

createRef：ref={this.myRef} myRef=React.createRef(); 取值this.myRef.current.value

<input type="text" placeholder="失去焦点示数据" ref={this.myRef} onBlur={this.showData5} />
 myRef=React.createRef();
 showData5=()=>{
 	console.log(this.myRef.current.value)
 }

另一方法获取DOM元素：方法里的event事件

 <input type="text" placeholder="失去焦点示数据" onBlur={this.showData6}/>
  showData6=event=>{
    console.log(event.target.value)
  }

函数传参方法：

1.函数柯里化：函数调用继续返回函数，多次接收参数，最后统一处理

<form  onSubmit={this.submit}>
  用户名： <input type="text" onChange={this.saveFormData('name')}/>
   密码： <input type="password" onChange={this.saveFormData('pass')} />
   <button>登录</button>
</form>
  submit=(event)=>{
       event.preventDefault();
       const {name,pass}=this;
       console.log(11,name.value,22,pass.value)
  }
  saveFormData=(dataType)=>{
      return (event)=>{//onChange真正调用的
           console.log(dataType,event.target.value)
           this.setState({[dataType]:event.target.value})//dataType是变量 用[dataType]
       }
   }

2.不用柯里化:

 <form  onSubmit={this.submit}>
  用户名： <input type="text" onChange={event=>this.saveData('name',event)}/>
  密码： <input type="password" onChange={(event)=>{this.saveData('pass',event)}} />
   <button>登录</button>
</form>
submit=(event)=>{
     event.preventDefault();
     const {name,pass}=this;
     console.log(11,name.value,22,pass.value)
 }
 saveData(dataType,event){
  	 console.log(dataType,event.target.value)
     this.setState({[dataType]:event.target.value})
 }

生命周期

旧
在这里插入图片描述

新

Diff算法

在这里插入图片描述
此笔记来自于视频：https://www.bilibili.com/video/BV1wy4y1D7JT

_小婷子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习React

React 基础案例1.先引入三个包：react.development.jsreact-dom.development.jsbabel.min.js2.创建一个容器3.创建虚拟DOM，渲染到容器中<body>  <div id="test"></div></body><script src="https://cdn.stat
复制链接

扫一扫