1、state

  1. state是组件对象中十分重要的属性，值以对象的模式进行存储。
  2. 通过state更改，从而更新页面显示的内容。
  3. 组件中render办法中的this指向实例对象，调用了1+n次，其中1是初始时调用。
  4. state扭转状态不能间接批改，要通过setState()进行状态变更。

初始化state

state = {    isHot: false,};

render渲染

事件绑定须要用onClick
render() {    return (        <h1 onClick={this.changeWeater}>            今天天气很{this.state.isHot ? "酷热" : "凉快"}        </h1>    );}

setState批改值

组件自定义的办法中this为undefined，如何解决？
1、强制绑定this: 通过函数对象的bind()
2、箭头函数
changeWeater = () => {    console.log("此处批改isHot的值", this);    this.setState({        isHot: !this.state.isHot,    });}

整体代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>state的简写形式</title></head><body>    <div id="test"></div>    <!-- 引入react外围库 -->    <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 Weater extends React.Component {            // 初始化状态            state = {                isHot: false,            };            // 自定义办法，用赋值语句的模式+箭头函数            changeWeater = () => {                console.log("此处批改isHot的值", this);                this.setState({                    isHot: !this.state.isHot,                });            }            render() {                console.log(this);                return (                    <h1 onClick={this.changeWeater}>                        今天天气很{this.state.isHot ? "酷热" : "凉快"}                    </h1>                );            }        }        ReactDOM.render(<Weater />, document.getElementById("test"));    </script></body></html>

2、props

  1. props属性是只读的，不能对他进行批改。
  2. 通过Person.propTypes/static propTypes对标签属性进行类型、必要性限度，其中Person为class类。
  3. 通过Person.defaultProps/static defaultPropTypes设置属性默认值
  4. const p = { name: "tom" }; <Person {...p},通过{...p}进行传值
// 对标签属性进行类型、必要性限度Person.propTypes={    name:PropTypes.string.isRequired,//限度name为字符串，必填    sex:PropTypes.string,    age:PropTypes.number,    speak:PropTypes.func//限度speak为函数}// 指定默认属性值Person.defaultProps={    sex:'男',    age:14}
class Person extends React.Component {    constructor(props) {        super(props)        console.log(props)    }    render() {        console.log(this)        // props是只读的        return (            <ul>                <li>姓名：{this.props.name}</li>                <li>年龄：{this.props.age}</li>                <li>性别：{this.props.sex}</li>            </ul>        );    }    // 对标签属性进行类型、必要性限度    static propTypes = {        name: PropTypes.string.isRequired,//限度name为字符串，必填        sex: PropTypes.string,        age: PropTypes.number,    }    // 指定默认属性值    static defaultProps = {        sex: '男',        age: 14    }}const p = { name: "tom" }ReactDOM.render(<Person {...p} />, document.getElementById("test"));

3、refs

1、字符串模式

<input ref="input1" type="text" placeholder="点击按钮提醒数据" />//获取数据this.refs.input1.value

2、回调模式

<input ref={c => { this.input1 = c }} type="text" placeholder="点击按钮提醒数据" />//获取数据this.input1.value

3、createRef的应用

// react.createRef被调用后，会返回一个容器，该容器能够存储被Ref标识的节点,该容器专人专用myRef = React.createRef()<input ref={this.myRef} type="text" placeholder="点击按钮提醒数据" />//获取数据this.myRef.current.value