state
当页面发生变化时，用state属性来记录页面变化，主要是组件内部发生变化时
<div id="test"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src = '../js/babel.min.js'></script>
<script type="text/babel">
class Like extends React.Component{
constructor(){//ES6语法定义类
super();//与constructor配对使用，这时候this指向其实例对象
this.state = {
isLikeMe:false
};
// this.myClick = this.myClick.bind(this)跟箭头函数二选一来改变this指向
}
myClick(){
console.log(this )
const { isLikeMe } = this.state; //此时this指向undefined，为了能够读取到实例对象上的state属性，可采用blind改变this指向，或者采用箭头函数
this.setState(
isLikeMe:!isLikeMe
}){//重新调用render 这是一个方法，setState会方法会使Render方法重新调用，从而重新渲染虚拟DOM，不允许通过this.state.isLikeMe来改变状态（改变状态必须使用this.setState()方法）
}
render(){
const {isLikeMe} = this.state
console.log(isLikeMe)
return <h2 onClick={this.myClick}>{isLikeMe?"你喜欢我":"我喜欢你"}</h2>
}
}
ReactDOM.render( <Like/>,document.getElementById('test'))
//类名首字母必须大写，否则会当成html标签解析，会啊哦错。
//render里必须传一个闭合标签，如果标签里面有内容可以是双标标签，没有内容是双标签，render返回值多个标签必须有一个根标签
props
每个实例对象都会有一个prop属性，主要通过标签由外向内传递内容，传递的可以是对象数组，和function。
- 注意组件内部不要修改prop的值
- 通常要有约束条件，和默认值
<div id = "test"></div>
<body>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script src="../js/prop-types.js"></script>
<script type="text/babel">
const person={
name:'jack',
age:18,
sex:"男"
}
class Person extends React.Component{
/* static propType={//在组件类上，组件的实例对象是没有办法使用的
name:PropTypes.string.isRequired,//组件回家回家收一个name属性，字符串类型，必须传
age:PropTypes.number.isRequired,
sex:PropTypes.string
}*/
render(){//定义在原型上，给组件的实力队形使用
const {name,age,sex}=this.props;//只读属性不要修改
return <ul>
<li>姓名：{name}</li>
<li>性别：{age}</li>
<li>年龄：{sex}</li>
</ul>
}
}
//约束条件,一般要写
Person.propTypes={
name:PropTypes.string.isRequired,//组件回家回家收一个name属性，字符串类型，必须传
age:PropTypes.number,
sex:PropTypes.string//PropTypes是一个变量，a.b a是变量，b是属性
}
//默认值
Person.defalutProps={//定义了默认值就不用串isRequire了
age:20,
sex:"女"
}
// ReactDOM.render(<Person name={person.name} age={person.age} sex={person.sex}/>,document.getElementById('test'))
//简写
ReactDOM.render( <Person {...person}/>,document.getElementById('test'))
//找到Person组件创建实例对象
//将属性传到props上
</script>
ref
三种写法
stringRef()即将要废弃，不推荐
funcRef()
creatRef()推荐使用，复杂，但是最符合React的规则
<div id="example"></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. 界面如果页面所示
2. 点击按钮, 提示第一个输入框中的值
3. 当第2个输入框失去焦点时, 提示这个输入框中的值
*/
class Input extends React.Component {
/*constructor() {
super();
this.createRef = React.createRef();
console.log(this.createRef); // 默认值：{current: null}
}*/
// 给实例对象添加的直接属性
createRef = React.createRef();
// 给实例对象添加直接方法
handleClick = () => {
// 箭头函数，this才能是组件的实例对象
// 获取input的值
// const value = this.refs.stringRef.value;
// const value = this.funcRef.value;
const value = this.createRef.current.value;
// 提示出来
alert(value);
// 清空数据
this.createRef.current.value = '';
};
// 失去焦点事件的回调函数
handleBlur = (event) => {
// console.log(event.target);
const value = event.target.value;
alert(value);
};
// 给原型上添加方法
render() {
console.log(this);
return <div>
{/*
stringRef：使用简单，但是即将废弃，不推荐使用
<input type="text" ref="stringRef" />
*/}
{/*
funcRef: 使用简单，比stringRef性能更好
<input type="text" ref={(input) => this.funcRef = input} />*/}
<input type="text" ref={this.createRef} />
<button onClick={this.handleClick}>点击提示数据</button>
<input type="text" placeholder="失去焦点提示数据" onBlur={this.handleBlur}/>
</div>
}
}
ReactDOM.render(<Input/>, document.getElementById('example'));
