React的三大核心 (state , props , refs)

1.state (状态)

  1 state是 React 里最重要的存放数据的 ,state 是个对象（可以包含多个key-value的组合）。
  2 React 把组件看成一个状态机 (State Machines) 通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

使用方式：

	class CompoentReact extends React.Component {
				// 构造器
				constructor(props){
					super(props)
					// this.state = {
					// 	 name: "Hello World",
					// }
				}
				// 这样也是可以的
				state = {
					name: "Hello World",
				}
				// 构建虚拟 dom
				render(){
					// 这里的 this 指向 当前的实例对象
					console.log(this);
					// 可以通过结构赋值提取 状态
					const {name} = this.state;
 					return (
						<div className="parentAttr">
							{/*  这是 React 的注释节点 */}
							{/* 切记在 React 里面必须只有一个根节点 (一个根元素) */} 
							{/* 赋值 渲染到页面上 */} 
							<h1>{name}</h1>
						</div>
					)
				}
		}
		// 渲染 dom
		ReactDOM.render( /* <CompoentReact /> */ /*  (function(){return new CompoentReact().render();}()) */ <CompoentReact></CompoentReact> /* 构造实例 */ , document.getElementById("root") /*向目标元素里面添加*/);

2.props (通信方式)

 1  React Props 组件之间的通信方式 （只限于 夫子关系）
 2 React Props 只限只读 (只可以运用 props )，不可修改 (不能改变)	

使用方式:

1.怎么使用 props 传参

	render(){
		// 通过标签插入 名字 (key) = 值（value） (属性节点)
		return (
			<ReactComponent  name={"小明"} age={"18"} sex={"男"} />
		)
	}

2 怎么获取 props 传递的参数

	// 通过 当前实例获取
	console.log(this.props) // 他是个对象 {name: "小明" , age: "18" , sex: "男"} 就可以取到相对应 键与值

具体怎么使用 以下案例:

	// 子组件
	class ChildrenComponent extends React.Component{
			render(){
				console.log(this.props); // 对象的形式
				return (
					<div>
						<h1>我是父组件传递过来的参数(props) {this.props.msg}</h1>
					</div>
				)
			}
		}
		// 父组件
		class ParentComponent extends React.Component{
			render(){
				return (
					<div>
						{/* 实例子组件 并且传递参数 */}
						<ChildrenComponent msg="哈哈哈哈哈哈" />
					</div>
				)
			}
		}
		ReactDOM.render(<ParentComponent />, document.getElementById("root"));

state 和 props 的区别

1 props是传递给组件的（类似于函数的形参），而state是在组件内部被组件自己管理的（类似于在一个函数内声明的变量）
2 props是不可以被修改的，所有的react组件都必须像纯函数一样保护他们的props不被修改
3 state是在组件中创建，一般是在constructor中初始化state
4 state是多变的，可被修改的。每次 (setState) 都是异步更新的

3 refs (标识真实dom)

1 refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。
2 我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回：

- - - 三种方式使用 refs - - -

第一种方式

	class Text extends React.Component{
               show = () => {
                   const text = this.refs.input1
                   console.log(text.value)
               }
               render(){
                   const element =  (
                   
                    <div id="box">
                        <input type="text" ref="input1" />
                        <button onClick={this.show}>点击获取 input 里面的 value</button>
                    </div>
                   
                   )
                   return element
               }
           }

第二种方式

	class Text extends React.Component{
               show = () => {
                   const text = this.input1;
                   console.log(text.value)
               }
               render(){
                   const element =  (
                   
                    <div id="box">
                    	{/* 通过回调函数 e = 真实 dom (input) */}
                        <input type="text" ref={(e) => this.input1 = e} />
                        <button onClick={this.show}>点击获取 input 里面的 value</button>
                    </div>
                   )
                   return element
               }
           }

第三种方式 (官方推荐使用)

	class Text extends React.Component{
                input1 = React.createRef();
                show = () => {
                    console.log(this.input1.current.value)
                }
                render(){
                    return (
                        <div id={'box'}>
                            <input type="text" ref={this.input1} />
                            <button onClick={this.show}>点击</button>
                        </div>
                    )
                }
            }

这三种之间的区别

		第一种方式 是把你标识的元素储存到了 refs里面了 可通过( this.refs.xxx 获取) , 但是第二种和第三种 ，把储存的元素 放到了当前的实例对象里面。(this.xxx 获取)

总结: React 的三大核心

1  state (状态) 储存数据。
2. props (通信) 组件之间的通信 (传参) 只限于 父子组件。
3. refs  (标识) 在React 里面标识 你想获取的元素。