React学习笔记(二)-CFANZ编程社区

组件实例的三大属性

1.属性一

2.属性二

	<script type="text/babel">
        //1.创建组件
        class Person extends React.Component {
            render() {
                const {name,age} = this.props;
                return (
                    <div>
                        <ul>
                            <li>姓名：{name}</li>
                            <li>年龄：{age}</li>
                        </ul>
                    </div>
                )
            }
        }
        
        //对标签属性进行类型|必要性的限制(这里需要引入PropTypes的React库文件)
        Person.propTypes = {
            name: PropTypes.string.isRequired,
            sex: PropTypes.string,
            age: PropTypes.number,
            speak: PropTypes.func
        }
        //对标签属性进行类型、必要性的限制
        Person.defultProps = {
            sex:'女',
            age:18
        }

        //2.渲染组件到页面
        ReactDOM.render(<Person name="张三" age="14"/>, document.getElementById('test1'));
        ReactDOM.render(<Person name="老王" age="18"/>, document.getElementById('test2'));
    
        function speak(){
            console.log('我说话了');
        }
    </script>

props简写方式（把所有的限制放在类的里边）

	<script type="text/babel">
	    //1.创建组件
	    class Person extends React.Component {
	        //对标签属性进行类型|必要性的限制
	       static propTypes = {
	            name: PropTypes.string.isRequired,
	            sex: PropTypes.string,
	            age: PropTypes.number,
	            speak: PropTypes.func
	        }
	        //对标签属性进行类型、必要性的限制
	        static defultProps = {
	            sex:'女',
	            age:18
	        }
	        render() {
	            const {name,age} = this.props;
	            return (
	                <div>
	                    <ul>
	                        <li>姓名：{name}</li>
	                        <li>年龄：{age}</li>
	                    </ul>
	                </div>
	            )
	        }
	    }
	
	    //2.渲染组件到页面
	    ReactDOM.render(<Person name="张三" age="14"/>, document.getElementById('test'));
	    
	    function speak(){
	        console.log('我说话了');
	    }
	</script>

3.属性三

ref的三种方式

字符串形式的ref

	 <script type="text/babel">
        //1.创建组件
        class Demo extends React.Component {
            showIputDate = () => {
                const {input2} = this.refs;
                alert(input2.value);
            }
            render() {
                return (    
                    <div>
                        <input onBlur={this.showIputDate} ref="input2" type="text" placeholder="失去焦点获取内容" />&nbsp;&nbsp;
                    </div>
                )
            }
        }

        //2.渲染组件到页面
        ReactDOM.render(<Demo/>, document.getElementById('test'));
    </script>

回调形式的ref

	 <script type="text/babel">
        //1.创建组件
        class Demo extends React.Component {
            showDate = () => {
                const {input} = this;
                alert(input.value);
            }

            showIputDate2 = () => {
                const {input3} = this;
                alert(input3.value);
            }

            render() {
                return (    
                    <div>
                        <input type="text" ref={(e)=>{this.input=e;console.log("@",e)}} placeholder="点击按钮获取内容" /> &nbsp;&nbsp;
                        <button onClick={this.showDate}>按钮</button>&nbsp;&nbsp;
                        <input onBlur={this.showIputDate2} ref={(c) => {this.input3 = c}} type="text" placeholder="失去焦点获取内容" />
                    </div>
                )
            }
        }

        //2.渲染组件到页面
        ReactDOM.render(<Demo/>, document.getElementById('test'));
    </script>

ceateRef的使用

	<script type="text/babel">
        //1.创建组件
        class Demo extends React.Component {
            showIputDate = () => {
                const {input2} = this.refs;
                alert(input2.value);
            }
            showDate = () => {
                const {input} = this;
                alert(input.value);
            }
            saveInput=(e)=>{
                this.input=e;
                console.log('@',e);
            }

            render() {
                return (    
                    <div>
                        <input type="text" ref={this.saveInput} placeholder="点击获取输入内容" />&nbsp;&nbsp;
                        <button onClick={this.showDate}>按钮</button>&nbsp;&nbsp;
                        <input onBlur={this.showIputDate} ref="input2" type="text" placeholder="失去焦点获取内容" />
                    </div>
                )
            }
        }

        //2.渲染组件到页面
        ReactDOM.render(<Demo/>, document.getElementById('test'));
    </script>

非受控组件与受控组件

	<script type="text/babel">
        class Login extends React.Component{
            onLogin = (event) => {
                //阻止表单提交
                event.preventDefault();
                const {username,password} = this;
                alert(`你输入的用户名是${username.value},密码是${password.value}`)
            }
            render() {
                return (
                    <form action="https://baidu.com" onSubmit={this.onLogin}>
                        用户名: <input ref={c => this.username=c} type="text" name="username"/> &nbsp;
                        密码：<input ref={c => this.password=c} type="text" name="password"/>&nbsp;
                        <button>提交</button>
                    </form>
                )
            }
        }

        ReactDOM.render(<Login/>,document.getElementById('test'));
    </script>

	<script type="text/babel">
       class Login extends React.Component{
            // 获取用户名到state
            changeUsername = (event) => {
                this.setState({username:event.target.value});
            }
            // 获取密码到state
            changePassword = (event) => {
                this.setState({password:event.target.value});
            }
            onLogin = (event) => {
                //阻止表单提交
                event.preventDefault();
                const {username,password} = this.state;
                alert(`你输入的用户名是${username},密码是${password}`)
            }
            render() {
                return (
                    <form action="https://baidu.com" onSubmit={this.onLogin}>
                        用户名: <input onChange={this.changeUsername} type="text" name="username"/> &nbsp;
                        密码：<input onChange={this.changePassword} type="text" name="password"/>&nbsp;
                        <button>提交</button>
                    </form>
                )
            }
            
        }

        ReactDOM.render(<Login/>,document.getElementById('test'));  
   </script>

例子

		class Login extends React.Component{
            // 初始化状态
            state = {
                username:'', //用户名
                password: '' // 密码
            }
            // 获取表单数据到状态中
            saveFromDate = (typeDate) => {
                return(event)=>{
                    this.setState({[typeDate]:event.target.value});
                }
            }
            onSubmit = (event) => {
                //阻止表单提交
                event.preventDefault();
                const {username,password} = this.state;
                alert(`你输入的用户名是${username},密码是${password}`)
            }
            render() {
                return (
                    <form action="https://baidu.com" onSubmit={this.onSubmit}>
                        用户名: <input onChange={this.saveFromDate('username')} type="text" name="username"/> &nbsp;
                        密码：<input onChange={this.saveFromDate('password')} type="text" name="password"/>&nbsp;
                        <button>提交</button>
                    </form>
                )
            }
        }

        ReactDOM.render(<Login/>,document.getElementById('test'));

不用函数的柯里化实现

	、<script type="text/babel">
        class Login extends React.Component{
            // 初始化状态
            state = {
                username:'', //用户名
                password: '' // 密码
            }
            // 获取表单数据到状态中
            saveFromDate = (typeDate,event) => {
               this.setState({[typeDate]:event.target.value});
            }
            onSubmit = (event) => {
                //阻止表单提交
                event.preventDefault();
                const {username,password} = this.state;
                alert(`你输入的用户名是${username},密码是${password}`)
            }
            render() {
                return (
                    <form action="https://baidu.com" onSubmit={this.onSubmit}>
                        用户名: <input onChange={event => this.saveFromDate('username',event)} type="text" name="username"/> &nbsp;
                        密码：<input onChange={event => this.saveFromDate('password',event)} type="text" name="password"/>&nbsp;
                        <button>提交</button>
                    </form>
                )
            }
            
        }

        ReactDOM.render(<Login/>,document.getElementById('test'));
    </script>

react生命周期(旧与新)

生命周期(旧)
在这里插入图片描述

例子

	<script type="text/babel">
        //创建组件
        class Sum extends React.Component{
            //构造器
            constructor(props){
                console.log('count---constructor');
                super(props)
                // 初始化状态
                this.state = {count:0};
            }

            //加1按钮的回调
            add = ()=>{
                //获取原状态
                let {count} = this.state;
                //更新状态
                this.setState({count:count+1})
            }

            //卸载组件按钮的回调
            death = ()=>{
                ReactDOM.unmountComponentAtNode(document.getElementById('test'));
            }

            //强制更新按钮的回调
            force = ()=>{
                this.forceUpdate();
            }

            //组件将要挂载的钩子
            componentWillMount(){
                console.log('count---componentWillMount');
            }

            //组件将要挂载完毕的钩子
            componentDidMount(){
                console.log('count---componentDidMount');
            }

            //组件将要卸载的钩子
            componentWillUnmount(){
                console.log('count---componentWillUnmount');
            }

            //控制组件更新的“阀门”
            shouldComponentUpdate(){
                console.log('count---shouldComponentUpdate');
                return true;
            }

            //组件将要更新的钩子
            componentWillUpdate(){
                console.log('count---componentWillUpdate');
            }

            //组件更新完毕的钩子
            componentDidUpdate(){
                console.log('count---componentDidUpdate');
            }

            render() {
                console.log('count---render');
                return (
                    <div>
                        <h2>当前求和为{this.state.count}</h2>
                        <button onClick={this.add}>点我+1</button>&nbsp;
                        <button onClick={this.death}>卸载</button>&nbsp;
                        <button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
                    </div>
                )
            }
            
        }

        //父组件A
        class A extends React.Component{
            //初始化状态
            state = {carName:'奔弛'}

            changeCar = ()=>{
                this.setState({carName:'奥拓'})
            }
            render(){
                return(
                    <div>
                        <div>我是A组件</div>
                        <button onClick={this.changeCar}>换车</button>
                        <B carName={this.state.carName}/>
                    </div>
                )
            }
        }
        
        //子组件B
        class B extends React.Component{
            //组件将要接受新的props的钩子
            componentWillReceiveProps(props){
                console.log('B---componentWillReceiveProps',props);
            }

            //控制组件更新的“阀门”
            shouldComponentUpdate(){
                console.log('B---shouldComponentUpdate');
                return true;
            }

            //组件将要更新的钩子
            componentWillUpdate(){
                console.log('B---componentWillUpdate');
            }

            //组件更新完毕的钩子
            componentDidUpdate(){
                console.log('B---componentDidUpdate');
            }

            render(){
                console.log('B---render');
                return(
                    <div>我是B组件，接受到的车：{this.props.carName}</div>
                )
            }
        }

        //渲染组件
        ReactDOM.render(<A/>,document.getElementById('test'));
        // ReactDOM.render(<Sum/>,document.getElementById('test'));
    </script>

生命周期(新)
在这里插入图片描述