React学习笔记2

笔记（2019.6.14）

JSX

JSX绑定属性需要注意！

class要写为className
for要写为htmlFor
行内样式格式： style={{ “color”：“blue” }} （也可把style作为对象写在state中，通过style={ this.state.style }引用）
单标签要封闭

引入本地图片

方法1

import img1 from ‘./assets/images/1.png’

通过<img src={logo} />引入

方法2

<img src={require(‘./assets/images/1.png’)}  />

循环数据

注意加Key

render() { 
        let theList = this.state.list.map(function(value , key){
            return <li key={key}>{value}</li>
        })
        return ( 
            <div>  
                             {/* 可以这样*/}
                <ul>
                    {theList}
                </ul>
                <hr />
                             {/* 还可以这样*/}
                <ul>
                    {
                        this.state.list3.map(function(value,key){
                            return <li key ={key}>{value.title}</li>
                        })
                    }
                </ul>
                
            </div>
         );
    }

事件处理

方法1

使用bind（this）改变this指向

getData（）{
	alter(this.state.name)
}

...
<button onClick={this.getData.bind(this）}>获取名字1</button>

方法2

在构造函数里bind

constructor(props) {
        super(props);
        this.state = { 
            name:'Tommy',
         this.getData= this.getData.bind(this)
    }
    
 ...
 <button onClick={this.getData）}>获取名字2</button>

方法3

箭头函数

getData =（）=>{
	alter(this.state.name)
}

执行方法传值

this.setName.bind(this,value)}

setName =(newname)=>{
        this.setState({
            name:newname
        })
    }
...
 <button onClick={this.setName.bind(this,'new Tommy')}>
                        click 
                </button>

setState

改变state的值

change =()=>{
        this.setState({
            name:'changed Tommy'
        })
    }

获取表单值

对input设置onChange监听每次输入框内的变化
通过e.target.value将获取到的值setState赋值给state中的属性
再通过点击按钮获取state中属性的值

也可以用ref来操作
使用<input ref="username" onChange={this.inputChange} />
在inputChange中使用this.refs.username.value也可以获取到input的值

获取表单checkbox的值

 handelBox =(key)=>{
        var hobby =this.state.hobby
        hobby[key].checked = !hobby[key].checked
        this.setState({ hobby:hobby  });
    }
...

爱好：
 {
     this.state.hobby.map((value ,key)=>{
         return (
             <span key={key}>
                 {value.title}<input type="checkbox" checked={value.checked} onChange={this.handelBox.bind(this,key)} />
             </span>
         )
     })
 }

约束性组件&非约束性组件

非约束性组件：<input type="text" defaultValue ="hello"/>其中的defaulyValue就是原始DOM中的value属性，REact完全不管理输出的过程。
约束性组件：<input value={this.state.username} type="text" onChange="{this.setInput}" />
这里的value不再是写死的值，它是this.state.username，这个是由this.setInput 管理的。
虽然onChange会导致重新渲染，但是React会优化这个渲染过程

React生命周期

componentDidMount() 方法会在组件已经被渲染到 DOM 中后运行
可以在这里操作一下localStorage

父子组件间传值

React中的组件

组件解决了html标签构建应用的不足，我们就可以自己定义一些组件，使用组件的好处在于把公共的功能单独抽离成一个文件作为一个组件，哪里需要用，就在哪里引入。

父传子

在调用子组件的时候定义一个属性，<Child msg='父消息'></Child>
在子组件中使用this.props.msg获得父组件传来的值，这里msg名字要一致

父组件不仅仅可以传值给子组件，还可以传方法，可以用 <Child fn={this.fn}></Child>在子组件中通过this.props.fn就可以执行啦~~

还可以传整个父组件，使用<Child parent（自定义）={this}></Child>，子组件可以通过this.props.parent...就可以使用父组件所有的属性和方法了

父组件主动获取子组件的数据

调用子组件的时候，指定ref的值<Child ref="child"></Child>
通过this.refs.child获取整个子组件实例

子传父

可以通过上面的父传子把所有父组件传给子组件的办法，提前在父组件中创建一个方法如getChildData，留给子组件使用。在子组件中通过this.props.parents.getChildData.bind(this,'子组件值'),传递给父组件

笔记（2019.6.15）

父组件给子组件传值

defaultProps

父子组件传值中，如果父组件调用子组件的时候不给子组件传值，则可以在子组件中使用defaultProps定义的默认值

Child.defaultProps={
	title:'默认标题'
}

当父组件没有传来值时，会默认使用defaultProps中定义的值

propTypes

验证父组件传值的类型合法性

import PropTypes from 'prop-types'
...
Child.propTypes ={
	title:PropTypes.string
}

注意PropTypes和propTypes的书写格式~