1.state属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>state</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//1.创建类式组件
class Weather extends React.Component{
//构造器调用几次?—— 1次
constructor(props){
console.log('constructor')
super(props)
//初始化状态
this.state={isHot:true,wind:'微风'};
//解决changeWeather中this指向问题
this.changeWeather =this.changeWeather.bind(this)
};
//render调用几次?—— 1+n次 1是初始化那一次,n是状态更新的次数
render(){
console.log('render')
const {isHot,wind} =this.state
//console.log(this)
return <h1 onClick={this.changeWeather}>今天天气有点{isHot ? '热' : '冷'},{wind ? '微风' : '大风'}</h1>
}
//changeWeather调几次? ——点几次,调几次
changeWeather(){
//changeWeather放在哪里?—— Weather的原型对象上,供实例调用
//由于changeWeather是作为onClick的回调,所以不是通过实例调用的,是直接调用
//类中的方法默认开启了局部的严格模式,所以changeWeather中的this为undefind
//console.log(this)
console.log('changeWeather')
//获取原来的isHot值
const isHot =this.state.isHot
//状态必须通过(setstate)进行更新,且更新是一种合并,不是替换
this.setState({
isHot:!isHot
})
this.changeWind()
//状态(state)不可直接更改,要借助内置的API去更改
//this.state.isHot= !isHot 这是错误写法
console.log(this.state.isHot)
}
changeWind(){
const wind = this.state.wind
this.setState({
wind:!wind
})
}
}
// 2.渲染类式组件到页面
ReactDOM.render(<Weather/>,document.getElementById("test"))
//必须放在渲染下面
//TODO 什么原因
// const title =document.getElementById("title")
// title.addEventListener('click',()=>{
// console.log('标题被点击了');
// })
// const title =document.getElementById("title")
// title.onclick =()=>{
// console.log('标题被点击了');
// }
// function title(){
// alert("标题被点击了")
// }
</script>
</body>
</html>
state简写方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 准备容器 -->
<div id="test"></div>
<!-- 引入核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入用于支持React操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入用于将jsx转成js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
class Weather extends React.Component{
// constructor(props){
// super(props)
// //this.state={isHot:true,wind:'微风'}
// //this.changeWeather=this.a.bind(this)
// }
state={isHot:true,wind:'微风'}
render(){
const {isHot,wind}=this.state
return <div><h1 onClick={this.a}>今天天气很{isHot ? '热' : '冷'},{wind}</h1></div>
}
//自定义方法——要用赋值语句的形式+箭头函数
a=()=>{
const b =this.state.isHot
this.setState({
isHot:!b
})
}
}
ReactDOM.render(<Weather/>,document.getElementById("test"))
</script>
</body>
</html>
2.props使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>props基本使用</title>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//创建类组件
class Pereson extends React.Component {
render() {
//console.log(this)
const { name, age, sex } = this.props
return (<div>
<ul>
<li>姓名:{name}</li>
<li>性别:{sex}</li>
<li>年龄:{age+1}</li>
</ul>
</div>)
}
}
//渲染组件到页面
ReactDOM.render(<Pereson name="tom" age={18} sex='女' />, document.getElementById("test1"))
ReactDOM.render(<Pereson name="a" age={20} sex='男' />, document.getElementById("test2"))
//ReactDOM.render(<Pereson name="b" age='30' sex='女'/>,document.getElementById("test3"))
const p = { name: 'b', age: 19, sex: "女" }
//ReactDOM.render(<Pereson name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))
ReactDOM.render(<Pereson {...p} />, document.getElementById('test3'))
</script>
</body>
</html>
对props进行限制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对props进行限制</title>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
class Person extends React.Component {
render() {
const { name, age, sex } = this.props
//props是只读的
return (
<ul>
<li>姓名:{name}</li>
<li>年龄:{age + 1}</li>
<li>性别:{sex}</li>
</ul>
)
}
}
//小写大写问题需注意
//对标签属性进行类型,必要性的限制
Person.propTypes = {
name: PropTypes.string.isRequired,//限制name必传,且为字符串
sex: PropTypes.string,//限制sex为字符串
age: PropTypes.number,//限制age为数值
speak: PropTypes.func,//限制speak为函数
}
//指定默认标签属性值
Person.defaultProps = {
sex: '不男不女',//性别默认值为
age: 18//年龄默认值为
}
ReactDOM.render(<Person name="tom" age={18} sex="男" speak={speak} />, document.getElementById("test1"))
ReactDOM.render(<Person name="a" age={20} sex="女" />, document.getElementById("test2"))
const p = { name: 'b', age: 18, sex: "女" }
ReactDOM.render(<Person {...p} />, document.getElementById("test3"))
function speak() {
console.log("我说话了")
}
</script>
</body>
</html>
props的简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>props的简写方式</title>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
class Person extends React.Component {
//构造器是否接收props,是否传递给super,取决于:是否希望在构造器中通过this访问props
constructor(props){
console.log(props)
super(props)
}
static propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
sex: PropTypes.string,
}
static defaultProps = {
sex: "男",
age: 18
}
render() {
const { name, sex, age } = this.props
return (
<ul>
<li>姓名:{name}</li>
<li>性别:{sex}</li>
<li>年龄:{age + 1}</li>
</ul>
)
}
}
ReactDOM.render(<Person name="a" age={18} sex="男" />, document.getElementById("test1"))
ReactDOM.render(<Person name='b' age={20} sex="女" />, document.getElementById("test2"))
const p1 = { name: "c", age: 18, sex: "男" }
ReactDOM.render(<Person {...p1} />, document.getElementById("test3"))
</script>
</body>
</html>
函数式组件使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数式组件使用props</title>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
// class Person extends React.Component {
// static propTypes = {
// name: PropTypes.string.isRequired,
// age: PropTypes.number,
// sex: PropTypes.string
// }
// static defaultProps = {
// age: 18,
// sex: "男"
// }
// render() {
// const { name, age, sex } = this.props
// return (
// <ul>
// <li>姓名:{name}</li>
// <li>性别:{sex}</li>
// <li>年龄:{age + 1}</li>
// </ul>
// )
// }
// }
function Person(props) {
console.log(props)
const { name, age, sex } = props
return (
<ul>
<li>姓名:{name}</li>
<li>性别:{sex}</li>
<li>年龄:{age}</li>
</ul>
)
}
Person.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
sex: PropTypes.string,
}
Person.defaultProps = {
sex: "男",
age: 18
}
ReactDOM.render(<Person name="a" age={18} sex="男" />, document.getElementById("test1"))
ReactDOM.render(<Person name='b' age={20} sex="男" />, document.getElementById("test2"))
const p1 = { name: "c", age: 18, sex: "男" }
ReactDOM.render(<Person {...p1} />, document.getElementById("test3"))
</script>
</body>
</html>
3.refs使用
字符串形式的ref
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串形式的ref</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
class Demo extends React.Component {
//展示左侧输入框的数据
showData = () => {
// const input = document.getElementById('input1')
// alert(input.value)
console.log(this.refs.input1)
const { input1 } = this.refs
alert(input1.value)
}
//展示左侧输入框的数据
showData2 = () => {
const { input2 } = this.refs
alert(input2.value)
}
render() {
return (
<div>
<input ref='input1' type="text" placeholder="点击按钮提示数据" />
<button onClick={this.showData}>点我提示左侧数据</button>
<input ref='input2' onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />
</div>
)
}
}
ReactDOM.render(<Demo a="1" b="2" />, document.getElementById("test"))
</script>
</body>
</html>
回调函数形式的ref
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串形式的ref</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
class Demo extends React.Component {
//展示左侧输入框的数据
showData = () => {
// const input = document.getElementById('input1')
// alert(input.value)
console.log(this.refs.input1)
const { input1 } = this.refs
alert(input1.value)
}
//展示左侧输入框的数据
showData2 = () => {
const { input2 } = this.refs
alert(input2.value)
}
render() {
return (
<div>
<input ref='input1' type="text" placeholder="点击按钮提示数据" />
<button onClick={this.showData}>点我提示左侧数据</button>
<input ref='input2' onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />
</div>
)
}
}
ReactDOM.render(<Demo a="1" b="2" />, document.getElementById("test"))
</script>
</body>
</html>
createRef
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
class Demo extends React.Component {
/*
React.ceateRef调用后可以返回一个容器,该容器可以存储被ref所标识的节点,该容器是专人专用的
*/
myRef = React.createRef()
myRef2 = React.createRef()
showData = () => {
console.log(this.myRef.current.value)
const myRef = this.myRef.current
alert(myRef.value)
}
showData2=()=>{
alert(this.myRef2.current.value)
}
render() {
return (
<div>
{/* <input ref={(currentNode) => { this.input1 = currentNode }} type="text" /> */}
<input ref={this.myRef} type="text" />
<button onClick={this.showData}>点我提交</button>
<input ref={this.myRef2} onBlur={this.showData2} type="text" />
</div>
)
}
}
ReactDOM.render(<Demo />, document.getElementById("test"))
</script>
</body>
</html>