React-菜鸟学习笔记（二）

 

这篇新颖的东西是React的组件的封装和引用

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
 
 /*jsx允许在模板中插入数组，数组会自动展开所有成员*/
/**
var arr = [
            <h1>白</h1>,
            <h1>富</h1>,
            <h1>美</h1>,
            <h1>甜</h1>
            ];
var element = (
    
     <div>  
         <h1>Hello, world! </h1>
         {arr}
     </div>
 
)
 
ReactDOM.render(
  element,
  document.getElementById('example')
);
*/
 
 
  

/* React组件 封装一个输出为‘hello world’的React组件，组件名为HelloMessage*/
/*Tips: 原生HTML元素名以小写字母开头，而自定义的React类名以大写字母开头。组建类只能包含一个顶层标签 return <div><h1>hello world</h1><div/> 是错的*/
/*方法1 使用函数定义一个组件  方法2 使用ES6 class定义一个组件*/

/**
function HelloMessage(props){
    return <h1>hello world: {props.name}</h1>
}

class Welcome extends React.Component{
    render(){
        return <h1>welcome slowcity</h1>;         
    }

}

const element = <div>
            <HelloMessage name='superMan'/> 
            <Welcome />
            </div>

ReactDOM.render(
  element,
  document.getElementById('example')
);

*/
/*复合组件  直白点就是封装组件*/
/**
function Name(props) {
    return <h1>网站名称：{props.name}</h1>;
}
function Url(props) {
    return <h1>网站地址：{props.url}</h1>;
}
function Nickname(props) {
    return <h1>网站小名：{props.nickname}</h1>;
}
function App() {
    return (
    <div>
        <Name name="造梦工场" />
        <Url url="https://www.cnblogs.com/" />
        <Nickname nickname="Slowcity" />
    </div>
    );
}

const element =( <App />)
ReactDOM.render(
    element,
    document.getElementById('example')
);

*/
/*将生命周期方法添加到类中  挂载和卸载*/

/*
Tips:
()=>this.tick() 是 ES6 中声明函数的一种方式，叫做箭头函数表达式，引入箭头函数有两个方面的作用：更简短的函数并且不绑定 this。

var f = ([参数]) => 表达式（单一）
// 等价于以下写法
var f = function([参数]){
   return 表达式;
}
箭头函数的基本语法：
(参数1, 参数2, …, 参数N) => { 函数声明 }
(参数1, 参数2, …, 参数N) => 表达式（单一）
//相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

// 当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明}

// 没有参数的函数应该写成一对圆括号。
() => {函数声明}

*/

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  } 
  //添加定时器  生命周期钩子 当 Clock 的输出插入到 DOM 中时，React 调用 componentDidMount() 生命周期钩子
  componentDidMount(){
    this.timerID = setInterval(
        () => this.tick(),1000
    );
  }
  //移除定时器 一旦 Clock 组件被从 DOM 中移除，React 会调用 componentWillUnmount() 这个钩子函数
  componentWillUnmount(){
    clearInterval(this.timerID);
  }
  
  tick(){
    this.setState({
        date:new Date()
    });
  
  }
 
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <FormattedDate date={this.state.date}/>
        <h2>hello{this.props.name} 现在是 {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Clock.defaultProps={
    name:"慢城"
}
function FormattedDate(props) {
  return <h2>现在是 {props.date.toLocaleTimeString()}.</h2>;
}

ReactDOM.render(
  <Clock />,
  document.getElementById('example')
);




</script>

</body>
</html>

 

posted @ 2019-01-02 18:13  斑马森林  阅读(458)  评论(0)  编辑  收藏  举报