前端:react笔记(贰): react 定义compont, 定义元素 props 介绍

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import './App.css';

import App from './App';

import * as serviceWorker from './serviceWorker';

//定义 元素

const ele = <h1 className="tes" >hello world</h1>; //style = {{textAlign:"center"}}

const el = React.createElement(

'h1',

{className:'tes'},

'hello red'

)

ReactDOM.render(ele,

document.getElementById('root')

);

 

//update dom

//props: 传入function的任意参数

// function Clock(prop){

// return (

// <div>

// <h1>hello</h1>

// <h2>now:{prop.date.toLocaleTimeString()}</h2>

// </div>

// )

// }

//es6 语法 推荐 定义组件必须 以大写名字开头

class Clock extends React.Component{

render(){

return(

<div>hello</div>,

<h2>now: {this.props.date.toLocaleTimeString()}</h2>

);

}

}

//使用组件

// function tick(){

// ReactDOM.render(

// <Clock date={new Date()}/>,

// document.getElementById('interval')

// )

// }

// setInterval(tick,3000);

class Welcome extends React.Component {

render() {

return <h1>Hello, {this.props.name}</h1>;

}

}

 

//多次使用

class Ticks extends React.Component{

render(){

return (

<div> //没有div框起来 默认只显示一个组件, 不知道为什么

<Welcome name="ssssssssssssssssssssssssssssssssssssssssss"></Welcome>,

<Clock date={new Date()}/>

</div>

// "aa" 不放在div里 只显示aa

);

}

}

ReactDOM.render(

<Ticks />,

document.getElementById('interval')

);

//官网实例

 

// class Apps extends React.Component{

// render(){return (

// <div>

// <Welcome name="Sara" />

// <Welcome name="Cahal" />

// <Welcome name="Edite" />

// </div>

// );

// }}

// ReactDOM.render(

// <Apps />,

// document.getElementById('interval')

// );

 

//纯函数:

//无论是使用函数或是类来声明一个组件，它决不能修改它自己的props。来看这个sum函数：

 

function sum(a, b) {

return a + b;

}

// 类似于上面的这种函数称为“纯函数”，它没有改变它自己的输入值，当传入的值相同时，总是会返回相同的结果。

 

// 与之相对的是非纯函数，它会改变它自身的输入值：

 

// React是非常灵活的，但它也有一个严格的规则：

 

// 所有的React组件必须像纯函数那样使用它们的props。

function withdraw(account, amount) {

account.total -= amount;

}

/*数组实现 使用{} 来在html元素等中解析变量 等*/

const array = [

<Ticks/>,

<Welcome name="arrays"/>

]

ReactDOM.render(

<div>{array}</div>,

document.getElementById('interval')

);

 

// If you want your app to work offline and load faster, you can change

// unregister() to register() below. Note this comes with some pitfalls.

// Learn more about service workers: https://bit.ly/CRA-PWA

serviceWorker.unregister();