react学习(一)

2018-06-24 02:16:22来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

组件和属性(props)

函数式组件:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

渲染一个组件:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
} //组件

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
); //渲染

注意:组件名总是大写字母开始,比如 Welcome。

组件名字可以直接用作html标签,比如<Welcome />

 

ReactDom.render()

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
); //第一个是App组件,返回的是html标签。第二个是react根节点。

注意:
组件必须返回一个单独的根元素。这就是为什么我们添加一个 <div> 来包含所有 <Welcome /> 元素的原因。

第二个render例子:

const element = <h1>Hello, world</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

状态(state)和生命周期

上面介绍的组件,是函数式组件,而这种组件有限制,无法使用state,因此,第二种组件——类组件,则变得额外重要。

函数式组件转化为类组件:

  1. 创建一个继承自 React.Component 类的 ES6 class 同名类。
  2. 添加一个名为 render() 的空方法。
  3. 把原函数中的所有内容移至 render() 中。
  4. 在 render() 方法中使用 this.props 替代 props
  5. 删除保留的空函数声明。
class Clock extends React.Component {  //Clock 大写开头,也就是函数式组件的名字
  render() {    //多了一个render()空方法
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

注意: 现在这个Clock就是类组件了,而不是函数式组件,此时才可以使用状态(state)。

class Clock extends React.Component {
  constructor(props) {
    super(props);  //将props传递给constructor构造函数,
    this.state = {date: new Date()}; // 使用constructor函数初始化this.state
  }   // 类组件应始终使用 props 调用基础构造函数。

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(  //渲染
  <Clock />,
  document.getElementById('root')
);

生命周期钩子:

class Clock extends React.Component {  //Clock 类组件
  constructor(props) {  //基础构造函数,用来初始化this.state
    super(props);     //传入props
    this.state = {date: new Date()};  //初始化
  }

  componentDidMount() {   // 挂载
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {  //卸载
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({     //更新state
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(   //调用组件
  <Clock />,
  document.getElementById('root')
);

 

事件:

  • React 事件使用驼峰命名,而不是全部小写。
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}>    //onClick 使用驼峰命名法
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

条件渲染:

参考文档:     http://www.css88.com/react/docs/conditional-rendering.html

返回null则渲染。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:深入理解浏览器工作原理

下一篇:react学习笔记(1):从前后端分离到项目部署