React小结

安装

npm install -g create-react-app
create-react-app my-app
cd my-app
yarn start

不要使用官网的

---

jsx

import React from "react"

const myname = 'react';
const imgUrl= "//img03.51jobcdn.com/im/2016/logo/logo_blue.png"
function aFun(name){
	return name+' used in Fun!!!';
}

function Home(){
	return (
		<div clas="home">
			<p>i  {myname} am in homepage!</p>
			<img src={imgUrl} />
			<h2>{aFun('hahha')}</h2>
		</div>
	);

}

export default Home;

注意，jsx里面的class需要写成className，tabindex需要写成tabIndex

---

props和组件

home.js
function Home(props){
	return (
		<div className="home">
			<p className="hahah">i  {myname} am in homepage!</p>
			<img src={imgUrl} />
			<h2>{aFun('hahha')}</h2>
			<p>我是从props里面获取的值：{props.page}</p>
		</div>
	);

}

app.js
import Home from './home'
  <Home page="home"></Home>

avatar.js
import React from 'react'

function Avatar(props){
	return (
		<div className="box">
			<div className="logo">
				<img src={props.user.url} />
			</div>
			<div className="title">
				<p>{props.user.title}</p>
			</div>
		</div>
	);
}

export default Avatar;

app.js
 <Home page="home" obj={{url:'xxx.jpg',title:'app to avatar'}}></Home>

home.js
	<Avatar user={props.obj} />

---

注意，不能去修改props的值

class组件式
// class组件式
class Avatar extends React.Component{
	render(){
		return (
			<div className="box">
			<div className="logo">
				<img src={this.props.user.url} />
			</div>
			<div className="title">
				<p>{this.props.user.title}</p>
			</div>
		</div>
		)
	}
}

export default Avatar;

---

State

/*
* @Author: cyany_blue
* @Date:   2020-04-21 16:57:46
* @Last Modified by:   cyany_blue
* @Last Modified time: 2020-04-21 17:08:18
*/

import React from "react"

class Stated extends React.Component{
	constructor(props){
		super(props);
		this.state = { date :new Date() };
	}

	render(){
		return (
			<div className="wrapper">
				<h2>It is { this.state.date.toLocaleTimeString()}</h2>
			</div>
		);
	}
}

export default Stated;

生命周期

	componentDidMount(){
		console.log('componentDidMount');
		this.timer = setInterval(()=>{
			this.tick();
		},1000);
	}
	componentWillUnmount(){
		console.log('componentWillUnmount');
		this.timer = null;
	}

	 tick(){ //注意不要写成function tick()
		this.setState({
			date:new Date()
		});

            //更改state必须使用setState()
	}

事件

1.需要主要绑定this
	constructor(props){
		super(props);
		this.state = { 
			date :new Date(),
			flag:true
		};
		this.handleClick = this.handleClick.bind(this);
	}

2.方法更新state
	handleClick(){
		this.setState(state=>({
			flag:!state.flag
		}))
	}
3.调用
onClick={this.handleClick}

如果需要传递参数和事件参数
onClick={(e)=>this.handleClick('adsa16a5dsa5',e)}

	handleClick(id,e){
		e.persist();//必须要有，要不然都是null的
		console.log(id,e);
		this.setState(state=>({
			flag:!state.flag
		}))
	}

---

条件渲染

	handleClick(id,e){
		e.persist();
		console.log(id,e);
		this.setState(state=>({
			flag:!state.flag,
			w:'wuwuwu'+Math.random()
		}))
		
	}

{this.state.flag
					?<div className="hahha">hahhah</div>
					:<div className="wuwuwu">wuuwuwu</div>}

获取通过函数或类里面判断里面判断渲染
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

-
  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

列表循环

		this.state = { 
			date :new Date(),
			flag:true,
			w:'wwww',
			numberList:[1,2,3,4,5]
		};
	<ul>
					{this.state.numberList.map((item,index)=>
						<li key={item.toString()}>{item}--{index}</li>//注意添加key
					)}
				</ul>

表单

	change(e){
		this.setState({
			value:e.target.value
		})
	}

  handleSubmit(event) {
    alert('提交的名字: ' + this.state.value);
    event.preventDefault();
  }
		<div className="form">
					<form onSubmit={this.handleSubmit}>
					<input type="text" value={this.state.value} onChange={this.change} />
                                         <textarea value={this.state.value} onChange={this.handleChange} />
					<input type="submit" value="submit" />
					</form>
				</div>

其余参考：https://react.docschina.org/docs/forms.html

---