react: Component Oriented Programming
Object-oriented ---> Module for ---> oriented components
Achieve results:
<The MyComponent>
<H2> assembly factory function (simple component) </ H2>
</ the MyComponent>
<MyComponent2>
<H2> for ES6 class components </ h2> (complex assembly)
</ MyComponent2>
Code:
<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-. 8">
<title> work3 </ title>
<Script the src = "../ JS / react.development.js" > </ Script>
<Script the src = "../ JS / dom.development.js-REACT"> </ Script>
<Script the src = "../ JS / babel.min.js"> </ Script>
< type = Script "text / Babel"> // embodiment an assembly factory function (simple components: component no status): // 1. the assembly defined function MyComonent () { // directly "rendering" method return <H2> assembly factory function </ h2> (simple assembly)
}
// 2. render component tag
React.render (</>,document.getElementById("example1 MyComonent ")) // Second way: ES6 class components (complex components) //
1. Definitions components:
class MyComponent2 the extends React.Component { // defines the type of a component class; creating instances
render () { // This class has a render (render) Method
return <H2> for ES6 class components (complex components) </ H2>
}
}
// 2. render component tags:
ReactDOM.render (<MyComonent2 />,document.getElementById("example2 "))
</ Script>
</ head>
<body>
<div ID =" example1 "> </ div>
<div ID =" example2 "> </ div>
</ body>
</ HTML>
Print this in the component class:
MyComponent2 the extends React.Component {class the render () { the console.log ( the this ) return <H2> for ES6 class components </ h2> (complex assembly) } }
There are three important attributes method:
props: a plurality of collection object attributes
refs: skip
state: state
The three major components of property :
A property: state
understanding:
1.state is the most important component object attribute value of the object (which can contain multiple data)
2. The assembly is called a "state machine", to update the corresponding page display (re-render component) by the state of the updated components
Encoding operation:
1. Initialization status:
constructor (The props) { Super (The props) the this .STATE = { // the this object is the representative assembly; this.state to the state initial value stateProp1: VALUE1, stateProp2: value2 } }
2. Read the status values :( read the value of the internal state of an attribute)
this.state.statePropertyName
3. Update status ---> Update interface components (not REACT DOM operations only update status)
the this .setState ({// update state method of stateProp1: VALUE1, stateProp2: value2 })
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>work4</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">//1.定义组件 class Like extends React.Component{
constructor(props){ //调用父类的构造函数
super(props) //传递propsthis.= {State content h2 which is varied, there should be a boolean identifier, two states represent two text//to false
isLikeMe:Initialization State//
}
// will force this new method of binding a component of the object, bind method yields a new function of
this .handleClick = this .handleClick.bind ( this )
}
the render () {
// read status
// writing a :
// const = isLikeMe this.state.isLikeMe;
// writing II: destructuring assignment
const} = {isLikeMe the this .STATE
return <H2 = {the onClick the this .handleClick}> isLikeMe { 'Do Kyung-soo': 'DO'? } </ h2>
// bind event
}
//Note; the above constructor, render rewriting method is a method of assembly, but the following is a new method, the new method of internal default handleClick this component is not an object but undefined
the handleClick () { // update state
// to obtain original state and negated
const isLikeMe =! the this .state.isLikeMe
// set the new state
the this .setState ({isLikeMe: isLikeMe})
// for ES6 new syntax, can be abbreviated as: this.setState (isLikeMe {})
}
}
/ / 2. render component tag
ReactDOM.render (</>,document.getElementById("example Like "))
</ Script>
</ head>
<body>
<div ID =" Example "> </ div>
</ body >
</ HTML>
note:
ReactDOM.render (<Like />,document.getElementById("example "))
// If there is no sub-labels, tags here writing: <like />, if there is a sub tag writing
ReactDOM.render (<like> </ like >, document.getElementById ( "example") )
Note: As long as there is a state of the component assembly factory function can not be used
Two attributes: props
understanding:
1. Each component object attributes will have props
2. All property element tags are stored in the props
effect:
1. The data transfer is changed to the component through the component from the outer label attributes
2. Note: Do not modify the internal components of props
Encoding operation:
1. Internal reading a property value
this.props.propertyName
2. The property values of the props will be necessary to limit the type of restrictions and
//老方法：
Person.propTypes={ name:React.PropTypes.string.isRequired, age:React.PropTypes.number.isRequired }
//新方法：
//prop-types库
= {Person.propTypes
name: PropTypes.string.isRequired, // string type and must be highlighted item
age: PropTypes.number // only emphasized digital type
}
3. Extended Attributes: The attributes of all objects passing through props
<Person...{...person}/>
4. The default property values
Person.defaultProps={ name:"Mary" }
The component class constructor
constructor (The props) { Super (The props) the console.log (The props) // Check all attribute values }
To achieve the effect: a plurality of component implementation tags
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>work5</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script src="../js/prop-types.js"></script>
<script type="text/babel">//1.定义组件//第一种定义方法/*function Person(props) {
return(
<ul>
<li>姓名：{props.name}</li>
)
<li> Age: props.sex {} </ Li>
<li> Gender: props.age {} </ Li>
</ul>
} * /
// The second method is defined:
class {React.Component the Person the extends
the render () {
return (
<UL>
<Li> Name: { the this .props.name} </ Li>
<Li> Gender: { the this } .props.age </ Li>
<Li> Age: { the this .props.sex} </ Li>
</ UL> )
}
} // specified attribute default value
Person.defaultProps = {
Sex: 'M' ,
Age :18
}
// the specified attribute value type and necessity
Person.propTypes = {
name: PropTypes.string.isRequired, // highlighted item string type and must
Age: PropTypes.number // only emphasized digital type
}
// 2. Render tag assembly
const = P1 {
name: 'Tom' ,
Age: 100 ,
Sex: 'F'
}
// ReactDOM.render (<p1.name the Person name = {} = {Age Sex p1.age} = {p1.sex } />, document.getElementById ( "example1"))
// shorthand method:
ReactDOM.render (<P1 the Person {...} />, document.getElementById ( "example1"))
const p2={
name:'Jack'
}
ReactDOM.render(<Person name={p2.name}/>,document.getElementById("example2"))
</script>
</head>
<body>
<div id="example1"></div>
<div id="example2"></div>
</body>
</html>
Note ES6 ... role:
1. Packaging
// definition of the method when the function (AS ...) {} // call when fn (1,2,3,4,5,6)
2. Unpack
arr1 const = [1,2,3 ];
arr2 const = [1, ... arr1,4,5,6]
Three attributes: refs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>work6</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">
//1.定义组件
class MyComponent extends React.Component{
constructor(props){
super(props)
this.showInput=this.showInput.bind(this)
this.handleBlur=this.handleBlur.bind(this)
}
The render () {
return (
<div>
<- First method:! Not recommended ->
<- - <INPUT type = "text" REF = "Content" />!>
<-! the second method: ref has become a callback function that will do the first time rendering, this function is to save the current dom element to the component objects in ->
<the INPUT of the type = "text" ref = {the INPUT => the this .input iNPUT} = />
<Button the onClick = { the this .showInput}> prompts </ Button>
<iNPUT type = "text" placeholder = "prompt content lose focus" = {the onBlur the this .handleBlur} />
</ div> )
} // custom method
showInput () {
/ *
A first method:
const INPUT = this.refs.content;
the console.log (input.value)
* /
// second method:
the console.log ( the this .input.value)
}
handleBlur ( Event) {
the console.log (event.target.value)
}
}
// 2. render component tag
ReactDOM.render (</>,document.getElementById("example the MyComponent "))
</ Script>
</ head>
<body >
<div ID = "Example"> </ div>
</ body>
</ HTML>