第1章、react基础知识；

前端小砖er

已于 2024-04-11 14:35:26 修改

阅读量321

点赞数 2

分类专栏： react从0到1渐进式学习文章标签： react.js 前端 javascript

于 2024-04-10 23:11:45 首次发布

本文链接：https://blog.csdn.net/weixin_44121341/article/details/137615050

版权

react从0到1渐进式学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、react学习前期准备；

1、基本概念；

前期的知识准备：

1.javascript、html、css；

2.构建工具：Webpack：https://yunp.top/init/p/v/1

3.安装node：npm：https://yunp.top/init/p/v/1

4.cnpm命令：http://npm.taobao.org/
官方文档：https://reactjs.org/docs/hello-world.html

二、react jsx语法；

1、jsx语法介绍；

遇到<>按照HTML语法解析，遇到{}按照JavaScript

三、react元素渲染；

import React from "react"
import Home from "./Home"
import MyNav from "./MyNav"
import StateComponent from "./StateComponent";
import ComponentLife from "./ComponentLife"
import SetStateDemo from "./setStateDemo"
import IfDemo from "./ifDemo"
import KeyDemo from "./KeyDemo"
import FormDemo from "./FormDemo"
import RefsAndDOM from "./RefsAndDOM"
import RefsForm from "./RefsForm"
import Parent from "./components/parent"
import Compose from "./compose"
import PropsTypeDemo from "./PropsTypeDemo"

// 用类的形式创建组件，Hook形式
class App extends React.Component{

    constructor(){
        super();
        this.state = {
            title:"文本1"
        }
    }

    clickChange = (data) =>{
        this.setState({
            title:data
        })
    }

    // 渲染函数
    render(){

        // const nav1 = ["首页","视频","学习"];
        // const nav2 = ["WEB","Java","Node"];

        return(
            <div>
                {
                    /* 
                        <h1>Hello React Component</h1>
                        <h3>学习React，最重要的是，心态要好!</h3>
                        
                        <Home />

                        <MyNav nav={ nav1 } title="路径导航"/>

                        <MyNav nav={ nav2 } title="学习导航"/> 
                    */
                }

                {/* <StateComponent /> */}

                {/* <ComponentLife title={ this.state.title } clickChanges={ this.clickChange }/> */}

                {/* <SetStateDemo /> */}

                {/* <IfDemo /> */}

                {/* <KeyDemo /> */}

                {/* <FormDemo /> */}

                {/* <RefsAndDOM /> */}

                {/* <RefsForm /> */}

                {/* <Parent /> */}

                {
                    /*
                    <Compose>
                        <div>我是组合效果</div>
                    </Compose> 
                    */
                }

                { 
                  <PropsTypeDemo />
                }
         
            </div>
        )
    }
}

export default App

四、react组件基础之创建组件；

import React from "react"

export default class Home extends React.Component{

    constructor(props){
        super(props);
        // this.clickHandler = this.clickHandler.bind(this);
    }

    clickHandler(element,event){
        // this无指向
        // console.log(this);
        console.log(element,event);
    }

    // apply call bind:面试常见问题
    render(){
        const names = ['iwen','ime'];
        return(
            <div>
                Home  
                {/* <button onClick={ this.clickHandler.bind(this) }>按钮</button> */}
                {/* <button onClick={ this.clickHandler }>按钮</button> */}
                {/* <button onClick={ (e) => {this.clickHandler(e)}}>按钮</button> */}
                <ul>
                    {
                        names.map((element,index) => {
                            // return <li onClick={ this.clickHandler.bind(this,element) } key={index}>{ element }</li>
                            return <li onClick={ (e) => this.clickHandler(element, e) } key={index}>{ element }</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

五、react props属性；

import React from "react"

// props不可以被修改
export default class MyNav extends React.Component{
    render(){
        return(
            <div>
                {/* jsx语法 */}
                <h3>{ this.props.title }</h3>
                <ul>
                    {
                        this.props.nav.map((element,index) =>{
                            return <li key={index}>{ element }</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

六、react state 状态；

import React from "react"

export default class StateComponent extends React.Component{
    /**
     * 组件中的状态：state
     * 以前我们操作页面的元素的变化，都是修改DOM，操作DOM
     * 但是有了React优秀的框架，我们不在推荐操作DOM，页面元素的改变使用State进行处理
     */

    constructor(props){
        super(props);
        // 定义
        this.state = {
            count:10,
            flag:true
        }
    }

    increment(){
        // setState
        this.setState({
            count:this.state.count+=1
        })
    }

    decrement(){
        this.setState({
            count:this.state.count-=1
        })
    }

    clickHandler = () =>{
        console.log(this);
    }

    render(){
        let showView = this.state.flag ? '我是孙悟空' : '我是假的孙悟空'
        return(
            <div>
                <h3>组件的State</h3>
                <p>{ this.state.count }</p>
                <button onClick={ this.increment.bind(this) }>增加</button>
                <button onClick={ this.decrement.bind(this) }>减少</button>
                <button onClick={ this.clickHandler }>关于this</button>
                <p>{ showView }</p>
            </div>
        )
    }
}

七、react组件生命周期函数；

1、基本概念；

componentWillMount 在组件渲染之前执行；
componentDidMount 在组件渲染之后执行；
shouldComponentUpdate 返回true和false，true代表允许改变，false代表不允许改变；
componentWillUpdate:数据在改变之前执行(state,props)；
componentDidUpdate:数据修改完成(state,props)；
componentWillReveiceProps:props发生改变执行；
componentWillUnmount 组件卸载前执行；

2、代码；

import React from "react"

export default class ComponentLife extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            count:10
        }
    }

    componentWillMount(){
        console.log("componentWillMount");
    }

    componentDidMount(){
        console.log("componentDidMount");
    }

    shouldComponentUpdate(){
        console.log("shouldComponentUpdate");
        return true;
    }

    componentWillUpdate(){
        console.log("componentWillUpdate");
    }

    componentDidUpdate(){
        console.log("componentDidUpdate");
    }

    componentWillReceiveProps(){
        console.log("componentWillReceiveProps");
    }

    componentWillUnmount(){
        console.log("componentWillUnmount");
    }

    changeHandler = () =>{
        this.setState({
            count:this.state.count+=1
        })
    }

    clickChange = () => {
        this.props.clickChanges('我是儿子的数据');
    }

    render(){
        const { count } = this.state;
        return(
            <div>
                生命周期函数:{ count } - { this.props.title }
                <button onClick={ this.changeHandler }>修改</button>
                <button onClick={ this.clickChange }>修改title</button>
            </div>
        )
    }
}

八、react setState 是同步还是异步；

import React from "react"

export default class SetStateDemo extends React.Component{

    constructor(){
        super();
        this.state = {
            count:0
        }
    }

    // 01.异步
    increment1(){
        this.setState({
            count:this.state.count+1
        });
        console.log(this.state.count);
    }

    // 02.官网的解决方案
    increment2(){
        this.setState({
            count:this.state.count+1
        },() => {
            console.log(this.state.count);
        })
    }

    // 03.利用 promise 和 async/await 把异步改成同步
    async increment3(){
        await this.setStateAsync({count:this.state.count+1});
        console.log(this.state.count);
    }
    setStateAsync(state){
        return new Promise((resolve) =>{
            this.setState(state,resolve);
        })
    }

    render(){
        return(
            <div>
                setState同步还是异步问题
                <p>{ this.state.count }</p>
                <button onClick={ this.increment1.bind(this) }>修改1</button>
                <button onClick={ this.increment2.bind(this) }>修改2</button>
                <button onClick={ this.increment2.bind(this) }>修改3</button>
            </div>
        )
    }
}

九、react 条件渲染；

import React from "react"

export default class IfDemo extends React.Component {
    /**
     * 常用的应用常见：
     *  1.对视图条件进行切换
     *  2.做缺省值
     */

    constructor() {
        super();
        this.state = {
            isLogin: false,
            names: ["ime"]
        }
    }
    clickHandler = () => {
        this.setState({
            isLogin: true
        })
    }

    render() {
        const { names } = this.state;
        let showView = this.state.isLogin ? <div>iwen</div> :  <div>请登录</div>;

        return (
            <div>
                条件渲染:{showView}
                <button onClick={this.clickHandler}>登录</button>

                {
                    names.length > 0 ?
                        <div>
                            {
                                names.map((element, index) => {
                                    return <p key={index}>{element}</p>
                                })
                            }
                        </div>
                        :
                        <div>请等待数据正在请求....</div>
                }
                
            </div>
        )
    }
}

十、react列表渲染key；

1、基本概念；

前key代表唯一索引，索引没有变化ui不会重绘，只有key发生变化才会发生重绘；

import React from "react"

export default class KeyDemo extends React.Component{

    constructor(){
        super();
        this.state = {
            userinfo:[
                {
                    name:"frank",
                    age:20,
                    sex:"男",
                    jobs:['后端']
                }
            ]
        }
    }

    clickHandler = () =>{
        this.setState({
            userinfo:this.state.userinfo.concat([{
                name:"sakura",
                age:30,
                sex:"女",
                jobs:['前端']
            }])
        })
    }

    render(){
        return(
            <div>
                <ul>
                    {
                        this.state.userinfo.map((element,index) =>{
                            return(
                                <li key={ index }>
                                    <span>姓名：{ element.name }</span>
                                    <span>年龄：{ element.age }</span>
                                    <span>性别：{ element.sex }</span>
                                    <div>
                                        职业：
                                        {
                                           element.jobs.map((childElement,childIndex) =>{
                                               return <span key={ childIndex }>
                                                         { childElement }
                                                      </span>
                                            })
                                        }
                                    </div>
                                </li>
                            )
                        })
                    }
                </ul>
                <button onClick={ this.clickHandler }>添加数据</button>
            </div>
        )
    }
}

十一、react表单受控组件；

import React from "react"

export default class FormDemo extends React.Component{

    constructor(){
        super();
        // 表单的值是受控组件
        this.state = {
            value:""
        }
    }

    handleSubmit = (e) =>{
        // 表单事件默认跳转，阻止事件
        e.preventDefault();
        console.log(this.state.value);
    }

    onChangeHandler = (e) =>{
        this.setState({
            value:e.target.value
        })
    }

    render(){
        return(
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input type="text" value={ this.state.value } 
                           onChange={ this.onChangeHandler }/>
                    <input type="submit" value="提交"></input>
                </form>
            </div>
        )
    }
}

十二、React RefsDom；

import React from "react"

export default class RefsAndDOM extends React.Component{

    constructor(){
        super();
        // 创建一个获取dom对象
        this.HelloDiv = React.createRef();
        this.spanText = React.createRef();
    }

    // ui已经渲染完成，dom是存在
    componentDidMount(){
        this.HelloDiv.current.style.color = "red";

        this.spanText.current.style.color = "red";
    }

    render(){
        return(
            <div>
                <div ref={ this.HelloDiv }>
                    Hello
                </div>

                <div ref={ this.spanText }>
                    <span>这是文本信息</span>
                </div>
            </div>
        )
    }
}

十三、react表单非受控组件；

import React from "react"

export default class RefsForm extends React.Component{

    constructor(){
        super();
        this.username = React.createRef();
        this.password = React.createRef();
    }

    clickHandler = (e) =>{
        console.log("username",this.username);
        console.log(this.username.current.value);
        console.log(this.password.current.value);
    }

    render(){
        return(
            <div>
                <input type="text" ref={ this.username }/>
                <input type="text" ref={ this.password }/>
                <button onClick={ this.clickHandler }>提交</button>
            </div>
        )
    }
}

十四、react 状态提升；

// 父组件：parent
import React from "react"
import Child1 from "./child1"
import Child2 from "./child2"

export default class Parent extends React.Component{
    constructor(){
        super();
        this.state = {
            money:1
        }
    }
    changeHandler(e){
        this.setState({
            money:e.target.value
        })
    }  
    render(){
        return(
            <div>
                <div>
                    parent:
                    <input type="text" value={ this.state.money } 
                           onChange={this.changeHandler.bind(this)} />
                </div>
                <div>
                    <Child1 money={ this.state.money }/>
                </div>
                <div>
                    <Child2 money={ this.state.money }/>
                </div>
            </div>
        )
    }
}

// 子组件1：child1
import React from "react"

export default class Child1 extends React.Component{
    constructor(){
        super();
        this.state = {
            input1:0
        }
    }
    componentDidMount(){
        this.setState({
            input1:this.props.money
        })
    }
    changeHandler(e){
        this.setState({
            input1:e.target.value
        })
    }
    render(){
        return(
            <div>
                人民币：
                <span>{this.props.money}</span>
                <input type="text" value={ this.state.input1 } 
                       onChange={ this.changeHandler.bind(this) }/>
            </div>
        )
    }
}

// 子组件2
import React from "react"

export default class Child2 extends React.Component {

    constructor(){
        super();
        this.state = {
            input2:0
        }
    }

    componentDidMount(){
        this.setState({
            input2:this.props.money * 7
        })
    }

    changeHandler(e){
        this.setState({
            input2:e.target.value
        })
    }

    render() {
        return (
            <div>
                美元
                <span>{this.props.money * 7}</span>
                <input type="text" value={ this.state.input2 } 
                       onChange={this.changeHandler.bind(this)} />
            </div>
        )
    }
}

十五、react 组件组合；

import React from "react"

/**
    <Compose>
        <div>我是组合效果</div>
    </Compose> 
**/

export default class Compose extends React.Component{
    render(){
        return(
            <div>
                哈哈哈:{ this.props.children }
            </div>
        )
    }
}

十六、react PropsType 组件验证；

import React from 'react'
import PropTypes from 'prop-types';

export default class PropsTypeDemo extends React.Component{
    render(){
        return(
            <div>
                Hello:{ this.props.title }
            </div>
        )
    }
}

// PropsTypeDemo.propTypes = {
//     title:PropTypes.number.isRequired
// }

PropsTypeDemo.propTypes = {
    title:PropTypes.string.isRequired
}

// PropsTypeDemo.defaultProps = {
//     title:'默认值'
// }