最近重新温习了一遍react基础，把学习中遇见的知识点记录下来。

1.<noscript></noscript>标签

image.png

2.jsx语法 javascript+xml结合 => 当遇见<> 按html解析；当遇见{} 按js解析

class App extends Component{
    render(){
        return (
            <div>
                <ul className={'my-list'}>
                    <li>js react</li>
                    <li>i love react</li>
                    <li>{true ? 'js niu' : 'js ruo'}</li>
                </ul>
            </div>
        )
    }
}

class App extends Component{
    render(){
        var child = React.createElement('li',null,'js react');
        var child2 = React.createElement('li',null,'i love react');
        var parent = React.createElement('ul',{className:'my-list'},child,child2)
        return <div>{parent}</div>
    }
}

React.createElement(tag,attribute,content)
第一个参数 tag：表示元素的类型，比如：h1, div 等。
第二个参数 attribute：表示该元素上的属性，使用 JavaScript 对象方式表示。
第三个参数 content：表示该元素内部的内容，可以是文字，可以继续嵌套另外一个

3.JSX语法中的圈重点

注释的写法：

render() {
        return (
            // 注释语法
            <Fragment>
                {/* 注释语法 =>推荐使用   */}
                {
                    // 注释语法
                }
            </Fragment>
        )
    }

class的写法

import './index.css';

class JSXkeng extends Component {
    render() {
        return (
            <Fragment>
                <p className={'red'}>className</p>
            </Fragment>
        )
    }
}

html标签的解析 :dangerouslySetInnerHTML属性对html标记进行解析渲染
dangerouslySetInnerHTML={{__html:${需要解析的内容}}}

class JSXkeng extends Component {
    constructor(props){
        super(props);
        this.state = {
            text : '<h2>我是一段需要解析html标签的文字</h2>'
        }
    }
    render() {
        return (
            <Fragment>
                <div>
                    <span>html的解析</span>
                    <p dangerouslySetInnerHTML={{__html:this.state.text}} />
                    <p>{this.state.text}</p> 
                </div>
            </Fragment>
        )
    }
}

效果：

image.png

label的使用: 使用htmlFor : htmlFor 为了和javascript中的for循环区别

            <div>
                    <label htmlFor="labelInp">
                        点击激活input:
                        <input id={'labelInp'} />
                    </label>
                </div>

4.响应式设计和数据的绑定

vue自带数据双向绑定，React是可以通过监听input数据变化 和 状态state的结合使用，来实现数据双向绑定。React是不推荐直接操作DOM的，推荐使用数据改变来更新界面

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

class Xiaojiejie extends Component{
    constructor(props){
        super(props); // 调用父级的方法，继承Component的方法
        this.state = { // 所有的数据都放在state里面
            inputVal:'',
            list:[{name:'列表1',key:'liebiao_1'}]
        }
    }

    render(){
        return (
            <Fragment>
                <div>
                    {/* 改变 this的两种写法 */}
                    <input value={this.state.inputVal} onChange={(e)=>{this.changeInput(e)}} />
                    <button onClick={this.addFn.bind(this)}>增加列表</button>
                </div>
                <ul>
                    {
                        this.state.list.map((item,index)=>{
                            return (
                                    <li key={item.key}>
                                        {item.name}
                                        <button onClick={()=>{this.delFn(index)}}>删除</button>
                                    </li>
                                )

                        })
                    }
                </ul>
            </Fragment>
        )
    }
    // 监听input change 赋值给状态inputVal
    changeInput(e){
        const target = e.target;
        this.setState({inputVal:e.target.value})
    }

    // 修改列表数据
    addFn(){
        const obj = {
            name:this.state.inputVal,
            key:`${this.state.inputVal.toLocaleLowerCase()}_${(Math.random()*10).toFixed(1)}`
        }
        this.setState({
            list:[...this.state.list,obj],
            inputVal:''
        })
    }

    // 删除列表数据
    delFn(DelIndex){
        const list = this.state.list;  // 注：修改数据时需要声明变量接值处理，不能直接操作this.state
        this.setState({
            list:list.filter((item,index)=>index !== DelIndex)
        })
    }
}

export  default  Xiaojiejie

效果：

image.png

5.react组件的拆分 以及 父子组件之间传值

父组件

import Child from './child';

// 父组件 父组件向子组件传值，使用`属性`传值 <Child list={this.state.list} />
class Parent extends Component{
    constructor(props){
        super(props); // 调用父级的方法，继承Component的方法
        this.state = { // 所有的数据都放在state里面
            inputVal:'',
            list:[{name:'列表1',key:'liebiao_1'}]
        }
    }

    render(){
        return (
            <Fragment>
                <div>
                    {/* 改变 this的两种写法 */}
                    <input value={this.state.inputVal} onChange={(e)=>{this.changeInput(e)}} />
                    <button onClick={this.addFn.bind(this)}>增加列表</button>
                </div>
                <ul>
                    <Child
                        list={this.state.list}
                        delItem={this.delFn.bind(this)}
                    />
                </ul>
            </Fragment>
        )
    }
    // 监听input change 赋值给状态inputVal
    changeInput(e){
        const target = e.target;
        this.setState({inputVal:e.target.value})
    }

    // 删除列表数据
    delFn(DelIndex){
        const list = this.state.list;  // 注：修改数据时需要声明变量接值处理，不能直接操作this.state
        this.setState({
            list:list.filter((item,index)=>index !== DelIndex)
        })
    }

    // 修改列表数据
    addFn(){
        const obj = {
            name:this.state.inputVal,
            key:`${this.state.inputVal.toLocaleLowerCase()}_${(Math.random()*10).toFixed(1)}`
        }
        this.setState({
            list:[...this.state.list,obj],
            inputVal:''
        })
    }
}

export default Parent;

子组件

import React, {Component, Fragment} from 'react';
// 子组件 子组件接受父组件的值:使用props this.props.属性名
// 在react中，子组件是不能直接修改干预父组件的state的
class Child extends Component{
    constructor(props){
        super(props);
        // 在constructor中修改this的指向
        this.childFelFn = this.childFelFn.bind(this);
    }

    render() {
        return (
            <Fragment>
                {
                    this.props.list.map((item,index)=>{
                        return (
                            <li key={item.key}>
                                {item.name}
                                <button onClick={this.childFelFn.bind(this,index)}>删除</button>
                            </li>
                        )
                    })
                }
            </Fragment>
        )
    }

    // 删除方法
    childFelFn(index){
        this.props.delItem(index);
    }
}

export default Child;