react基础入门

渲染react的两种方法,render只能对单个进行渲染
ReactDOM.render(<App />,document.getElementById('root'))

ReactDOM.render(
	<div>
		<App />
		<Text />
	</div>,
	document.getElementById('root')
)

JSX
JSX语法里面,有两种类型的标签
第一种标签:普通的html标签
在这里插入图片描述
第二种标签:组件标签
在这里插入图片描述
组件的标签的首字母必须是大写的,普通的为小写,比如说< div>

TodoList的添加删除

在这里插入图片描述

import React ,{Component, Fragment} from 'react';
//react 响应式
//定义组件
class TodoList extends Component{
    //constructor 在组件创建的第一个时刻自动被执行
    //组件会接收外部传的参数,把这个参数传递给外部基类的构造函数
    //前两行固定写法
    constructor(props){
        super(props);
        //在组件中创建了两个数据,数据一定要定义在state中
        this.state = {
            inputValue:'',
            list:[]
        }
    }
    handleInputChange(e){
        // console.log(e.target.value);
        // this.state.inputValue = e.target.value;不能直接这么改,会出错,使用固定的setState函数
        this.setState({
            inputValue:e.target.value
        })
    }
    handleKeyUp(e){
        // console.log(e.keyCode);
        //回车的keyCode值为13
        if(e.keyCode===13){
            //this.state.inputValue;
            //list中包含了list和input中的量
            const list = [...this.state.list,this.state.inputValue];
            //es6中如果键和值都是一样的,list:list 可以直接写list
            this.setState({
                list,
                inputValue:''
            })
        }
    }

    handleItemClick(index){
        //拿到当前数据,拷贝一个副本
        const list = [...this.state.list];
        list.splice(index,1);
        this.setState({list});
    }
    //render函数决定组件渲染内容
    render(){
        //在render函数中,this指向的是这个组件
        //return一个内容出去,如果没有return出去,页面上是没有内容的
        return(
            <Fragment>
                {/* 对于jsx语法,一个属性等于一个js变量或者一个js表达式,需要用{}引起来 */}
                <input 
                    value = {this.state.inputValue} 
                    // handleInputChang函数的this指向的是undefined,需要使用bind将this指向变更成这个组件的指向,
                    // 也就是指向render()函数的指向,又由于render函数指向的是组件,也就是说handleInputChange也指向了这个组件
                    onChange = {this.handleInputChange.bind(this)}
                    //当按任意一个键,键弹起来的时候绑定的事件
                    onKeyUp = {this.handleKeyUp.bind(this)}
                    />
                <ul>
                    {
                        // 用map进行循环输出
                        // map方法必须进行return
                        this.state.list.map((value,index)=>{
                            // 加入key会使react的性能更高,key值是唯一的
                            // 循环输出的每一项都要使用key,值不使用key会一直进行报警告
                            return (
                                <li 
                                    key={index} 
                                    onClick = {this.handleItemClick.bind(this,index)}
                                >
                                    {value}
                                </li>)

                        })
                    }
                </ul>
            </Fragment>
        );
    }
}
//在index引用之前要先将totolist暴露出去
//也就是把自己暴露出去,供别人使用
export default TodoList;

bind(this)底层原理:每一次用户触发这个事件的时候,都会给你重新生成一个新的函数,这样会导致性能较低。
随后将this.handleInputChange.bind(this);放入constructor构造函数中,因此这个方法只在组件创建的一瞬间被执行一次,之后这个函数handleInputChange就不会被新的生成了
JSX中不能有class会和类名class相冲突,因此为了防止这种警告,使用className
从前使用点击一个标签使输入框聚焦,使用lable for在这里插入图片描述
但是在JSX语法中,for是一个循环的关键字,又会有歧义,可能会有冲突,因此在JSX语法中使用htmlFor
注释
// 这是普通js中的注释
{/*这是JSX在的注释*/}
进一步完善

import React ,{Component, Fragment} from 'react';
import './style.css'
//react 响应式
//定义组件
class TodoList extends Component{
    //constructor 在组件创建的第一个时刻自动被执行
    //组件会接收外部传的参数,把这个参数传递给外部基类的构造函数
    //前两行固定写法
    constructor(props){
        super(props);
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleKeyUp = this.handleKeyUp.bind(this);
        //在组件中创建了两个数据,数据一定要定义在state中
        this.state = {
            inputValue:'',
            list:[]
        }
    }
    handleInputChange(e){
        // console.log(e.target.value);
        // this.state.inputValue = e.target.value;不能直接这么改,会出错,使用固定的setState函数
        this.setState({
            inputValue:e.target.value
        })
    }
    handleKeyUp(e){
        // console.log(e.keyCode);
        //回车的keyCode值为13且内容不为空
        if(e.keyCode===13 && e.target.value!==''){
            //this.state.inputValue;
            //list中包含了list和input中的量
            const list = [...this.state.list,this.state.inputValue];
            //es6中如果键和值都是一样的,list:list 可以直接写list
            this.setState({
                list,
                inputValue:''
            })
        }
    }

    handleItemClick(index){
        //拿到当前数据,拷贝一个副本
        const list = [...this.state.list];
        list.splice(index,1);
        this.setState({list});
    }

    getListItems(){
        // 用map进行循环输出
        // map方法必须进行return
        return this.state.list.map((value,index)=>{
            // 加入key会使react的性能更高,key值是唯一的
            // 循环输出的每一项都要使用key,值不使用key会一直进行报警告
            return (
                <li 
                    key={index} 
                    onClick = {this.handleItemClick.bind(this,index)}
                    // 不进行转译,比如<h1>test</h1>输出的是大字号的test,而不是<h1>test</h1>
                    //对value的内容不要做转译,直接的输出到li标签的内部
                    //{__html:value}是js的一个对象,html前面是两个下划线
                    dangerouslySetInnerHTML={{__html:value}}
                >
                </li>
            )
        })        
    }
    //render函数决定组件渲染内容
    render(){
        //在render函数中,this指向的是这个组件
        //return一个内容出去,如果没有return出去,页面上是没有内容的
        return(
            <Fragment>
                {/* 对于jsx语法,一个属性等于一个js变量或者一个js表达式,需要用{}引起来 */}
                {/* <span>请输入内容:</span> */}
                <label htmlFor ='myinput'>请输入内容:</label>
                <input 
                    id = 'myinput'
                    className = 'input'
                    value = {this.state.inputValue} 
                    // handleInputChang函数的this指向的是undefined,需要使用bind将this指向变更成这个组件的指向,
                    // 也就是指向render()函数的指向,又由于render函数指向的是组件,也就是说handleInputChange也指向了这个组件
                    onChange = {this.handleInputChange}
                    //当按任意一个键,键弹起来的时候绑定的事件
                    onKeyUp = {this.handleKeyUp}
                    />
                <ul>
                    {this.getListItems()}
                </ul>
            </Fragment>
        );
    }
}
//在index引用之前要先将totolist暴露出去
//也就是把自己暴露出去,供别人使用
export default TodoList;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值