react使用

创建组件的三种方法

	// 函数创建的组件
	function component(){
		return (
			<div>组件1</div>
		)
	}
	// 没有 关于 this 的操作 不需要加载对象 性能高
	// es5 创建
	let component = React.createClass({
	  	defaultProps: { //组件默认的props对象
        	initialValue: ''
	    },
	    // 设置 initial state
	    getInitialState: function() {//组件相关的状态对象
	        return {
	            text: this.props.initialValue || 'placeholder'
	        };
	    },
	    render(){
	    	return(
				<div>{}</div>
			)
		}
	})
	// this的指向就是自己 可以直接使用this 可以使用mixins 
	// es6 创建
	class component extends React.component{
		constructor(props){
			super(props);
			this.state = {
				text:"组件"
			}
		}
		,
	    render(){
	    	return(
				<div>{this.state.text}</div>
			)
		}
	}
	// 因为是class 所以this的指向 要使用 bind(this)来修改this指向 或者在行内使用箭头函数
	// 还不能使用mixins

把创建的组件挂载到dom上面

	<div id="app"></div>
	ReactDOM.render(component,document.getElementById('app'))

refs 的使用

	  class One extends React.Component {
            render() {
                return (
                    <div>
                        <div>one</div>
                    </div>
                )
            }
        }
        class Two extends React.Component {
            constructor(props){
                super(props);
                this.state = {

                }
            }
            componentDidMount(){
                console.log(this.refs)
            }
            render() {
                return (
                    <div>
                        <One ref="one"></One>
                        <div ref="two">two</div>
                    </div>
                )
            }
        }

React.createRef()

 class One extends React.Component {
            constructor(props){
                super(props);
                this.content = React.createRef()
            }
            componentDidMount(){
                console.log(this.content)
            }
            render() {
                return (
                    <div>
                        <div ref={ele => this.content = ele}>one</div>
                    </div>
                )
            }
        }

React.forwardRef 可以获取到组件内的某个元素 主要是因为他可以多带一个参数ref

     const FocusInput = React.forwardRef((props, ref) => {
            return <input type="text" ref={ref} />
        });
     class Component1 class React.Component{
     		constructor(props){
				super(props);
				this.input = React.createRef()
			}
			 componentDidMount(){
                console.log(this.input)
                this.input.current.focus()
            }
			render() {
                return (
                    <div>
           				<FocusInput ref={this.input} />
                    </div>
                )
            }
	 }