React三大核心属性

1.state属性

简介

state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
把组件看成是一个状态机（State Machines）通过更新组件的state来更新对应的页面显示(重新渲染组件)

基础实例

class Weather extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isHot: true };
    this.changeWeather = this.changeWeather.bind(this);
  }
  render() {
    const {isHot} = this.state;
    return <h1 onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'}</h1>;
  }
  changeWeather(){
    const isHot = this.state.isHot;
    // 更新state 是一种合并 不是替换
    this.setState({isHot:!isHot});
  }
  }
  ReactDOM.render(<Weather />,document.getElementById('test'));

changeWeather 放在哪里？?

Weather 的原型对象上供实例使用
由于changeWeather 是为onClick做为的回调所以不是通过实例的回调是直接使用
类中的方法默认开启了局部的严格模式所以changeWeather 中的this为undefined
- 强制绑定this: 通过函数对象的bind()
  1
  this.changeWeather = this.changeWeather.bind(this);
- 使用箭头函数
  1
  2
  3
  4
  changeWeather = () =>{
  const {isHot} = this.state;
  this.setState({isHot:!isHot});
  }
- 状态数据，不能直接修改或更新需要使用 this.setState();

state简写方式

class DemoName extends React.Component {
  state = { key: value };
  render() {
    const {key} = this.state;
    return <h1 onClick={this.handle}></h1>;
  }
  handle = () =>{
    const {key} = this.state;
    this.setState({key:!key});
  }
}

Props属性

简介

每个组件对象都会有props(properties的简写)属性
组件标签的所有属性都保存在props中
内部读取某个属性值 this.props.propertyName
作用：通过标签属性从组件外向组件内传递数据（只读 read only）
对props中的属性值进行类型限制和必要性限制

基础实例

类组件

class Person extends React.Component {
  render() {
    const { name,sex,age } = this.props;
    return (
      <ul>
        <li>姓名：{name}</li>
        <li>性别：{sex}</li>
        <li>年龄：{age}</li>
      </ul>
    );
  }
}
const p = { name:'Jarry',age:18,sex:'女'};
ReactDOM.render(<Person {...p} />, document.getElementById("test"));

函数组件

function Person(props){
  const {name,age,sex} = props;
  return(
    <ul>
      <li>姓名：{name}</li>
      <li>性别：{sex}</li>
      <li>年龄：{age}</li>
    </ul>
  )
}
const p = { name:'Jarry',age:18,sex:'女'};
ReactDOM.render(<Person {...p} />, document.getElementById("test"));

对Props进行约束限制

类组件的约束形式

class Person extends React.Component {
  // 对标签属性值进行类型 bi必要性的限制
  static propTypes ={
    name: PropTypes.string.isRequired,
    sex: PropTypes.string,
    age: PropTypes.number
  }
  // 指定默认的属性值
  static defaultProps ={
    sex:'保密',
    age:18
  }
  render() {
    const { name,sex,age } = this.props;
    return (
      <ul>
        <li>姓名：{name}</li>
        <li>性别：{sex}</li>
        <li>年龄：{age}</li>
      </ul>
    );
  }
}
const p = { name:'Jarry'};
ReactDOM.render(<Person {...p} />, document.getElementById("test"));

对函数组件的约束形式

function Person(props){
  const {name,age,sex} = props;
  return(
    <ul>
      <li>姓名：{name}</li>
      <li>性别：{sex}</li>
      <li>年龄：{age}</li>
    </ul>
  )
}
// 对标签属性值进行类型 bi必要性的限制
Person.propTypes ={
  name: PropTypes.string.isRequired,
  sex: PropTypes.string,
  age: PropTypes.number
}
// 指定默认的属性值
Person.defaultProps ={
  sex:'保密',
  age:18
}
const p = { name:'Jarry',age:18,sex:'女'};
ReactDOM.render(<Person {...p} />, document.getElementById("test"));

props与state的区别

props中的数据都是外界传递过来的

state中的数据都是组件私有的；（通过Ajax获取回来的数据，一般都是私有数据）

props中的数据都是只读的，不能重新赋值

state中的数据，都是可读可写的

子组件只能通过props传递数据

Refs属性

简介

组件内的标签可以定义ref属性类标识自己，有点类似与JS中的id
React文档中再三强调，请不要过度使用refs，所以当我们可以用dom原生对象解决时，尽量不要使用refs 依照之前的写法，首先是给出类组件和函数组件中refs的写法

三种编码形式

1.字符串形式的ref（官方不推荐）

class Demo extends React.Component {
  showblurData = () =>{
    alert(this.refs.input.value);
  }
  render() {
    return (
      <input ref='input' type='text' placeholder='失去焦点展示数据' onBlur={this.showblurData} />
    );
  }
}

2.函数回调形式的ref

class Demo extends React.Component {
  /** 展示失去焦点的数据 */
  showblurData = () =>{
    alert(this.input2.value);
  }
  render() {
    return (
      <input ref={ c=> this.input2 = c} type='text' placeholder='失去焦点展示数据' 
        onBlur={this.showblurData} />
    );
  }
}

3.createRef创建ref容器（官方推荐）

class Demo extends React.Component {
  /**
   * React.createRef 调用函数后可以返回一个容器 该容器可以存储被ref所标识的节点
  */
  myRef = React.createRef();
  /** 展示左侧数据 */
  showData = () =>{
    alert(this.myRef.current.value);
  }
  render() {
    return (
      <div>
        <input ref={this.myRef} placeholder="点击按钮提示数据" type="text" />
        <button onClick={this.showData}>点击我提示左边的数据</button>
      </div>
    );
  }
}