react笔记

1、使用类时用：className

2、label标签属性的for改用htmlfor

3、vScode快速生成代码快捷件的插件：Simple React Snippets

4、组件的建立与使用

新建子组件js文件

父组件引入并使用

4、组件传值：父组件向子组件传递内容，靠属性的形式传递，如 xxx={value}

父组件传值和方法给子组件：

<XiaojiejieItem content={value} index={index} deleteItem={this.deleteItem.bind(this)} key={index+value}/>

子组件使用父组件传过来的值和方法：

//使用值
<div onClick={this.handleClick}>{this.props.content}</div>

//使用方法
    handleClick(){
        this.props.deleteItem(this.props.index) //使用父组件传过来的方法
    }

5、方法绑定this，构造方法形式

    constructor(props){
        super(props)
        this.handleClick=this.handleClick.bind(this) //绑定this
    }

二、使用reacthook

useState---》设置变量

const [ sex , setSex ] = useState('男')

 

useEffext---》代替声明周期

useEffect(()=>{
        console.log('useEffect=>老弟你来了！Index页面')
        return ()=>{
            console.log('老弟，你走了!Index页面')
        }
    },[])

useContext===>使父子之间传值简单

<CountContext.Provider value={count}>
    <Counter />
</CountContext.Provider>

//Counter是子组件、要传count