React快速入门
2018-12-08 本文已影响5人
强某某
创建项目
1.npx create-react-app myapp
2.cd myapp
3.npm start
文件说明
index.js文件:
//加快react运行速度的js文件
import * as serviceWorker from './serviceWorker';
补充：组件名称首字母必须大写
案例说明
数据基本绑定
import React, { Component } from 'react';
class Home extends Component {
constructor() {
super()
this.state={
user:{
username:"qiang",
age:30
}
}
}
render() {
return (
<div>
<p>{this.state.user.username}</p>
<p>{this.state.user.age}</p>
</div>
)
}
}
export default Home;
style和class的绑定
说明：
class=> className
for => htmlFor
import React,{Component} from 'react';
import '../assets/css/list.css';
class List extends Component{
constructor(){
super()
this.state={
name:["a","b","c"],
style:{
color:'red',
fontsize:'40px'
},
color:'red',
blue:'blue'
}
}
render(){
return(
<div>
<ul>
<li style={this.state.style}>{this.state.name[0]}</li>
// 注意此处：之所以两层{}是因为内部也是对象
<li style={{color:'red'}}>{this.state.name[1]}</li>
<li style={{color:this.state.color}}>{this.state.name[2]}</li>
</ul>
<br/>
<ul>
<li className='blue'>字符串css</li>
<li className={this.state.blue}>变量css</li>
</ul>
// 此处for的特殊写法
<label htmlFor='in'>测试</label>
<input type='text' id='in'/>
<br/>
</div>
)
}
}
export default List;
图片引入和遍历
import React, { Component } from 'react';
import img from '../assets/image/a.png'
class New extends Component {
constructor() {
super()
this.state = {
arr:["a","b"],
//注意此处内部元素没有""包裹
arr1:[<p key="1">a</p>,<p key="2">b</p>]
}
}
render() {
//遍历方式一
let listResult=this.state.arr.map((val,index)=>{
return <p key={index}>{val}--{index}</p>
})
return (
<div>
<p>引入图片方式一</p>
<img src={img} />
<p>引入图片方式二</p>
<img src={require('../assets/image/a.png')} /><br/>
{this.state.arr1}<br/>
{listResult}<br/>
//遍历方式二
{
this.state.arr.map((val,index)=>{
return <p key={index}>{val}</p>
})
}
</div>
);
}
}
export default New;
绑定this和传参
说明：jsx的点击事件是onClick,而且不能加()，这代表立即执行
import React, { Component } from 'react';
class New extends Component {
constructor() {
super()
this.state = {
msg: '元数据'
}
this.bindThis2 = this.bindThis2.bind(this)
}
test() {
console.log("成功");
}
bindThis1() {
console.log(this.state.msg);
}
bindThis2() {
console.log(this.state.msg);
}
bindThis3 = () => {
console.log(this.state.msg);
}
setStateInfo(info) {
this.setState({
msg: info
})
}
render() {
return (
<div>
{this.state.msg}
<button onClick={this.test}>点击事件</button>
<button onClick={this.bindThis1.bind(this)}>绑定this方式一</button>
<button onClick={this.bindThis2}>绑定this方式二</button>
<button onClick={this.bindThis3}>绑定this方式三</button>
<button onClick={this.setStateInfo.bind(this,"修改的值")}>参数修改state值</button>
</div>
);
}
}
export default New;
事件对象案例(获取数据的两种方式)
import React, { Component } from 'react';
class New extends Component {
constructor() {
super()
this.state = {
msg: ''
}
}
test(event){
// console.log(event);事件对象
//获取自定义属性aid
let aid=event.target.getAttribute('aid');
console.log(aid);//123
}
inputChange=(event)=>{
//获取数据的方式一
// let value=event.target.value;
//获取数据的方式二
let value=this.refs.name.value;
this.setState({
msg:value
})
}
showInfo=()=>{
console.log(this.state.msg);
}
render() {
return (
<div>
<button aid='123' onClick={this.test.bind(this)}>事件对象</button>
<input type="text" onChange={this.inputChange} ref='name'/>
<input type="button" value="显示输入框的值" onClick={this.showInfo}/>
</div>
);
}
}
export default New;
键盘事件
import React, { Component } from 'react';
class New extends Component {
constructor() {
super()
this.state = {
msg: ''
}
}
onKeyUpChange=(event)=>{
// console.log(event.keyCode);获取键盘事件码
//enter事件
if(event.keyCode==13){
let value=event.target.value;
this.setState({
msg:value
})
}
}
render() {
return (
<div>
<p>{this.state.msg}</p>
<input type="text" onKeyUp={this.onKeyUpChange} ref='name'/>
</div>
);
}
}
export default New;
实现双向数据绑定
import React, { Component } from 'react';
class New extends Component {
constructor() {
super()
this.state = {
msg: ''
}
}
inputChange=(e)=>{
this.setState({
msg:e.target.value
})
}
render() {
return (
<div>
<p>{this.state.msg}</p>
<input type="text" value={this.state.msg} onChange={this.inputChange} />
</div>
);
}
}
export default New;
说明：input绑定value时候必须加上onChange方法否则会报错，除非使用defaultValue
react中只有model改变影响view的单向数据流，所以如想实现双向数据绑定，必须手写
上面其实就是view改变改变model的过程代码
补充：
非约束型组件：例如非约束性组件中defaultValue就相当于原生dom的value，react不参与管理
约束型组件：例如非约束性组件中value，react参与管理(this.handleChange管理)
实际上，input中的value根本不是用户输入的值，而是onChange事件触发后，由于this.setState导致一次重新渲染，不过react会优化算法
表单相关
import React, { Component } from 'react';
class New extends Component {
constructor() {
super()
this.state = {
city:'',
citys:["北京","上海"],
sexs:[
{key:"乒乓球",value:false},
{key:"篮球",value:false},
{key:"足球",value:true}
]
}
}
submitMethod=(e)=>{
//阻止默认事件
e.preventDefault();
console.log(this.state);
}
optionSet=(e)=>{
this.setState({
city:e.target.value
})
}
sexsChange(index){
//react接管了默认点击操作，如果布变更数据，则界面点击无效
let sexs=this.state.sexs;
sexs[index].value=!sexs[index].value;
this.setState({
sexs
})
}
render() {
return (
<div>
<p>{this.state.city}</p>
<form>
<select value={this.state.city} onChange={this.optionSet}>
{
this.state.citys.map((value,index)=>{
return <option key={index}>{value}</option>
})
}
</select>
{
this.state.sexs.map((value,index)=>{
return <span key={index}>
<input type="checkbox" onChange={this.sexsChange.bind(this,index)} checked={value.value}/>{value.key}
</span>
})
}
<br/>
<input type="submit" value="提交" onClick={this.submitMethod}/>
</form>
</div>
);
}
}
export default New;
父子组件相关
父子组件互相传参
父组件:
import React, { Component } from 'react';
import Header from './Header'
class New extends Component {
constructor(props) {
super(props)
this.state = {
msg:"New传入的参数"
}
}
show=()=>{
console.log("被子组件调用的父组件的方法");
}
send2Parent=(info)=>{
this.setState({
msg:info
})
}
getChildCom=()=>{
//既然可以获取子组件，则属性方法自然都可以使用
console.log(this.refs.header);
}
render() {
return (
<div>
<p>{this.state.msg}</p>
<input type="button" value="父组件获取子组件" onClick={this.getChildCom}/>
<Header msg={this.state.msg} ref='header' new={this} method={this.show}/>
</div>
);
}
}
export default New;
defaultProps和propTypes
-
defaultProps:父子组件传值中，如果父组件调用子组件的时候不给子组件传值，则可以在
子组件中使用defaultProps定义的默认值 -
propTypes:验证父组件传值的类型合法性
子组件:
import React, { Component } from 'react';
//验证数据类型需要引入PropTypes
import PropTypes from 'prop-types';
class Header extends Component {
showParent=()=>{
console.log(this.props.new);
}
render() {
return (
<div>
<p>{this.props.msg}</p>
<button onClick={this.props.method}>调用父组件方法</button>
<button onClick={this.showParent}>获取整个父组件</button>
<button onClick={this.props.new.send2Parent.bind(this,"子组件传递的")}>子组件给父组件传值</button>
</div>
);
}
}
//如果例如父组件没传入title则使用该默认值，否则使用父组件传值
//针对的是this.props.title是否传入
Header.defaultProps={
title:"标题"
}
//验证数据类型,注意propTypes和PropTypes
Header.propTypes={
title:PropTypes.string
}
export default Header;
生命周期
1.组件加载的时候触发的函数:
constructor(构造函数) componentWillMount(组件将要挂载) render(渲染) componentDidMount(组件挂载完毕)
2.组件更新的时候触发的函数:
shouldComponentUpdate(更新数据) ComponentWillUpdate(组件将要更新) render componentDidMount
2.1 补充
shouldComponentUpdate(nextProps,nextState){
比较props或者states，返回true则更新照常，返回false则取消更新，
且不会调用下面的两个生命周期函数
}
分别是更新后的父子组件的传递参数和更新后的state
使用场景：父组件有子组件A和子组件B，当父组件调用this.setState更新一个作为子组件A属性
的state时，render方法被再次调用，此时组件A和组件B同时被更新，其实真正改变的只有组件
A，但组件B也同时被要求更新了，这是没有必要的，于是shouldComponentUpdate就显的有用
了，在该函数体内比较props或是states，如果没有改变就取消这个更新，这对性能上算是一个提
升。因为传递过来到组件的都是更新过的，可以和该组件当前的prop和state比较，从而通过返回布尔值确定是否需要更新该组件
3.在父组件里面改变props传值的时候触发的函数:
componentWillReceiveProps
4.组件销毁的时候触发的函数:
componentWillUnmount
注意：绝对不要在componentWillUpdate和componentDidUpdate中调用this.setState方法，否则将导致无限循环调用。
组件销毁的案例:
父组件:
import React, { Component } from 'react';
import Header from './Header'
class New extends Component {
constructor(props) {
super(props)
this.state = {
msg:"参数",
flag:true
}
}
destoryChild=()=>{
this.setState({
flag:!this.state.flag
})
}
render() {
return (
<div>
<button onClick={this.destoryChild}>切换子组件</button>
{
this.state.flag?<Header />:''
}
</div>
);
}
}
export default New;
子组件:
import React, { Component } from 'react';
class Header extends Component {
render() {
return (
<div>
<p>Header组件</p>
</div>
);
}
componentWillUnmount(){
console.log("组件销毁");
}
}
export default Header;
说明：每一次点击切换子组件都可以让子组件显示或者销毁，每次销毁时候触发子组件的componentWillUnmount
