React基础一

1. 组件引用 --> import XX from '../XX/XX';

css 引用--> import '../XX/XX.css';

2. 图片引用-->

1). import img1 from '../assets/images/1.jpg'; <img src={img1}></img>  -->通过变量的方式应用,将变量赋值给img标签

2).<img src={require('../assets/images/1.jpg')}></img> -- > img标签引入图片路径

3). <img src='https://XXX.com/1.jpg'></img> --> im标签引入url地址

4). background: url('../images/picture.png') 0 0 no-repeat;---> 背景图css引入.

 

3. 数组对象循环遍历方式-->

1).  map 对象,下标

var listResult = this.state.list.map((item, index) =>

            <li key={index}>{item}</li>

        )

2). forEach 对象

        const elements = [];

        this.state.list4.forEach((item) => {

            elements.push(

                <div>

                    <p>name:{item.name}</p>

                    <p>pwd:{item.pwd}</p>

                </div>

            );

        })

4. 改变事件中的this指向 (如果传递一个函数名给一个变量，之后通过函数名()的方式进行调用，在方法内部如果使用this则this的指向会丢失。) -->

run()

1). {this.run.bind(this)} --> 通过bind指明run方法中this的指向

2). this.run = this.run.bind(this) --> 构造函数constructor改变this指向

3). run=()=>{} --> 箭头函数改变this指向

4). {()=>this.run())} --> 行间定义函数的时候使用箭头函数 原理同上

5. 本地缓存localStorage使用

1). 写--> localStoreage.setItem("key","value"); --> value 必须为字符串格式- JSON.stringify();  /localStorage.valueOf() -->读取所有 通过localStorage.key(i);遍历

2). 读--> localStoreage.getItem("key"); --> JSON.pase();

3). 删-->localStoreage.removeItem("key");

 6. 父子组件传值 -->组件的相互调用中，我们把调用者称为父组件，被调用者称为子组件

1). 父组件向子组件传值，父通过初始state，子组件通过this.props进行接收 --- 还可以给子组件传方法,以及把整个父组件传给子组件。

　　a.在调用子组件的时候定义一个属性  <Header msg='首页'></Header> ---   <Header title={this.state.title} run={this.run} home={this}></Header>

　　b.子组件里面 this.props.msg 　　　　　　　　　　　　　　　　　　--- {this.props.run}/{this.props.home.state.msg}

　　c. defaultProps --> 父子组件传值中，如果父组件调用子组件的时候不给子组件传值，可以在子组件中使用defaultProps定义的默认值 -- >Header.defaultProps={title:"defaultProps头部"}

　　d.propTypes -- >验证父组件传值的类型合法性 -->https://reactjs.org/docs/typechecking-with-proptypes.html

2). 父组件主动获取子组件的数据

　　a.调用子组件的时候指定ref的值   <Header ref='header'></Header>      

　　b.通过this.refs.header  获取整个子组件实例

3). 子组件给父组件传值 -->绑定一个事件，然后事件是父组件传递过来的this.props.event来进行值的更替

　　{this.props.home.getChildData.bind(this,this.state.msg)}