react的基础语法学习

react里面的元素渲染

在react中使用的语法是jsx，元素是他的最小单位

const a = <div>123<div/>  //这就是一个元素
ReactDOM.render(a,根元素) //第一个参数是元素，第二是需要把元素放的位置

react里面的元素创建出来就没办法更改，如果需要更改，就只能在创建一个新的。

jsx

jsx是react里面的语法，在{}里面可以写js代码，但是不支持if ，else，可以使用三元运算。
对于样式的写法：

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>菜鸟教程</h1>,
    document.getElementById('example')
);

• 关于注释
  如果是正常的代码里面就是 //
  如果在html代码中用{/**/} ,就是用花括号包着在写注释。

react的组件

• 使用函数来定义组件

function HelloMessage(props) {
    return <h1>Hello World!</h1>;
}
 
const element = <HelloMessage />;  //element 就是一个组件
 
ReactDOM.render(
    element,
    document.getElementById('example')
);

• 使用类定义组件

class Welcome extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

自己定义的组件首字母需要大写
添加属性的class用className代替，for用htmlFor代替

状态state

react里面的state和vue里面的计算属性有点像，就是如果state里的数据变化了，那个页面也就会跟着变化。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
 
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

props

这是用来传递数据使用的，用来父组件传递给子组件。

function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>;
}
 
const element = <HelloMessage name="Runoob"/>;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);

也可以使用

HelloMessage.defaultProps = {
  name: 'Runoob'
};

去设置传递的数值

• 还支持传递的数据的验证。

var title = "菜鸟教程";
// var title = 123;
class MyTitle extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.title}</h1>
    );
  }
}
 
MyTitle.propTypes = {
  title: PropTypes.string  //验证
};
ReactDOM.render(
    <MyTitle title={title} />,
    document.getElementById('example')
);

• 验证的类型
  • optionalArray: React.PropTypes.array, //数组
    optionalBool: React.PropTypes.bool, //布尔值
    optionalFunc: React.PropTypes.func, //函数
    optionalNumber: React.PropTypes.number, //数字
    optionalObject: React.PropTypes.object, // 对象
    optionalString: React.PropTypes.string, //字符串
  • optionalElement: React.PropTypes.element, // react的元素
  • requiredFunc: React.PropTypes.func.isRequired, // 不能为空
  • 自定义验证

   customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  }
}

事件的绑定

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
      // 这边绑定是必要的，这样 `this` 才能在回调函数中使用(******)
    this.handleClick = this.handleClick.bind(this);
  }
 
  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }
 
  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}
 
ReactDOM.render(
  <Toggle />,
  document.getElementById('example')
);

react的生命周期

• 已经插入真实的dom
• 正在被重新渲染
• 已移出dom

对应的方法

• componentWillMount 渲染前使用
• componentDidMount 已经插入真实dom使用
• componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用
• componentWillUnmount 移出使用

ref

ref可以用来获取别的组件的信息。

class MyComponent extends React.Component {
  handleClick() {
    // 使用原生的 DOM API 获取焦点
    this.refs.myInput.focus();  //可以在父组件去操作子组件的情况********
  }
  render() {
    //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
    return (
      <div>
        <input type="text" ref="myInput" />
        <input
          type="button"
          value="点我输入框获取焦点"
          onClick={this.handleClick.bind(this)}
        />
      </div>
    );
  }
}
 
ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);