The three core attributes of React:
1.state (save data)
-
state is the most important property of the component object, and the value is an object (can contain multiple key-value combinations)
-
The component is called **"state machine"**, by updating the state of the component to update the corresponding page display (re-rendering the component)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>state简写方式</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//1.创建组件
class Weather extends React.Component{
//初始化状态
state = {
isHot:false,wind:'微风'}
render(){
const {
isHot,wind} = this.state
return <h1 onClick={
this.changeWeather}>今天天气很{
isHot ? '炎热' : '凉爽'}，{
wind}</h1>
}
//自定义方法————要用赋值语句的形式+箭头函数
changeWeather = ()=>{
const isHot = this.state.isHot
this.setState({
isHot:!isHot})
}
}
//2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))
</script>
</body>
</html>
- The this in the render method of the component is the component instance object. This is undefined in the custom method of the component . How to solve it?
-
Method 1: Mandatory binding this: through bind() of the function object
-
Method 2: Arrow functions
-
Note: State data cannot be directly modified or updated , and must be modified using setState
2. props (passing data and methods)
-
Each component object will have props (short for properties) attribute
-
All properties of component tags are stored in props
- Internally read a property value
this.props.name
- Type restrictions and necessity restrictions on the attribute values in props
Use the prop-types library to restrict (requires the introduction of the prop-types library)
Person.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.
}
- Extended properties: Pass all properties of the object through props
<Person {...person}/>
- Default property values:
Person.defaultProps = {
age: 18,
sex:'男'
}
- Component class constructor
constructor(props){
super(props)
console.log(props)//打印所有属性
}
3.refs (get the attributes of the DOM node)
The tags in the component can define the ref attribute to identify themselves . The ref in the form of
method callback is recommended
<input ref={
(c)=>{
this.input1 = c}}/>
<script type="text/babel">
//创建组件
class Demo extends React.Component{
//展示左侧输入框的数据
showData = ()=>{
const {
input1} = this
alert(input1.value)
}
//展示右侧输入框的数据
showData2 = ()=>{
const {
input2} = this
alert(input2.value)
}
render(){
return(
<div>
<input ref={
c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>
<button onClick={
this.showData}>点我提示左侧的数据</button>
<input onBlur={
this.showData2} ref={
c => this.input2 = c } type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
//渲染组件到页面
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
</script>