JSPang-React学习总结(一.进阶)-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaodi520520/article/details/92063426

本文总结了React的学习进阶内容，包括JSX语法中的标签创建原理、三元运算符的使用，以及如何创建React项目。强调了组件命名规范、jsx注意事项，如注释、class与label的属性写法。还介绍了使用Simple React Snippets插件提高编码效率，子组件的拆分以及父子组件间值的传递方法。最后讨论了React面试中常问的单向数据流、与其他框架的结合及函数式编程的优势。

一.React中JSX语法内部创建标签原理:

<ul className="my-list">
    <li>JSPang.com</li>
    <li>I love React</li>
</ul>
//上述的react内部创建过程
var child1=React.createElement('li',null,'JSPang.com');//参数1是标签名(string),参数2是类名(obj),参数3是内容()
var  child1=React.createElement('li',null,'I love React')
var root=React.createElement('ul',{className:'my-list'},child1,child2)

二.JSX语法中可以使用三元运算符,但不可以使用if-else这样复杂的语句.

在这里插入图片描述

三.React脚手架创建项目

1.命令

create-react-app 项目名

2.index.js中增加一个Xiaojiejie组件,并把老组件注释
在这里插入图片描述

注意：组件名称必须以大写字母开头。

因为React 会将以小写字母开头的组件视为原生 DOM 标签。
例如，<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，
并且需在作用域内使用 Welcome。

3.在xiaojiejie.js里准备好初始模板
在这里插入图片描述
完整代码:

import React,{Component,Fragment} from 'react';

class xiaojiejie extends Component {
    constructor(props){//构造函数
        super(props)//调用父类的方法
        this.state={
            inputValue:'',
            list:['头部按摩','精油推背'],
        }
    }
    render(){
        return (
            <Fragment>
                 <div><input value={this.state.inputValue} onChange={this.changeValue.bind(this)}/> <button onClick={this.addList.bind(this)}> 增加服务 </button></div>
               <ul>
                  {
                      this.state.list.map((v,i)=>{
                          return <li key={i} onClick={this.deleteValue.bind(this,i)}>{v}</li>
                      })
                  }
               </ul> 
            </Fragment>
        )
    }
    changeValue(v){
        // console.log(v.target.value);
        this.setState({//这是一个方法,里面传入对象
            inputValue:v.target.value
        })
        
    }
    addList(){
        if(this.state.inputValue===''){
            return
        }
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:''
        })
    }
    deleteValue(index){
        let list=this.state.list;//这里要用新的数组去删除,旧的this.state只能取值,修改值要用this.setState({})方法操作;
        list.splice(index,1);
       this.setState({
           list
       })
       
    }
}
export default xiaojiejie;

4.实现效果:
在这里插入图片描述
补充:JSX中的html解析问题
如果想在文本框里输入一个h1标签，并进行渲染。默认是不会生效的，只会把h1标签打印到页面上，这并不是我想要的。如果工作中有这种需求，可以使用dangerouslySetInnerHTML属性解决。具体代码如下：

<ul>
    {
        this.state.list.map((item,index)=>{
            return (
                <li 
                    key={index+item}
                    onClick={this.deleteItem.bind(this,index)}
                    dangerouslySetInnerHTML={{__html:item}}
                >
                </li>
            )
        })
    }
</ul>

上面的代码就可以实现html格式的输出。

四.写jsx的几个注意点(防止采坑)

1.注释
单行注释:外面可以,里面注释写法不一样,
在这里插入图片描述

推荐注释方法(vscode里直接按ctrl+/)

2.类名写法:class要写成className(react是为了避免与class类冲突)

3.label标签的for属性要写成htmlFor(react为了避免与for循环冲突)
在这里插入图片描述

五.使用Simple React Snippets插件快速写代码,具体的快捷键插件里有介绍.

六.使用子组件进行拆分.

准备好XiaojiejieItem.js
在这里插入图片描述
导入和使用(导入和使用的开头要大写)

七.父子组件之间的传值(很重要)

1.父组件向子组件的传值
要记住一点：父组件向子组件传递内容，靠属性的形式传递。
操作过程:在父组件中自定义一个属性,值等于要传递的值,在子组件中通过this.props.属性来获取即可。
在这里插入图片描述

总结:

2.子组件向父组件传值
思路:在父组件中传递一个方法给子组件,在子组件里接收并调用父组件的这个方法,在调用方法之前在子组件里组件以参数的形式传递信息给父组件,这样就实现了子组件到父组件的数据传递。

在这里插入图片描述

完整代码地址:父组件是xiaojiejie.js,子组件是xiaojiejieItem.js

https://github.com/huanggengzhong/react-learn/blob/master/04-react(jspang教程)/01-demo01/src/xiaojiejie.js
补充技巧:JSX中的bind(this)可不可以简写?可以的,直接在构造器里定义即可。如：

八.面试中容易问到的问题

1.单向数据流
即父组件中的值传递到子组件时,子组件只能使用,不能修改,这就是单向数据流。（这个好处是父组件定义好后防止子组件数据变化影响父组件）
如果非要改变,那就父组件传递一个方法,在子组件中调用父组件的方法,这样就可以改变。
2.React可以和其他框架配合使用吗?可以,在public/index.html中引入即可。
3.函数式编程的好处是什么？
函数式编程让我们的代码更清晰，每个功能都是一个函数。
函数式编程为我们的代码测试代理了极大的方便，更容易实现前端自动化测试。