引入react核心库

##引入react核心库

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

##react使用步骤

  <script type="text/babel">
        const VDOM = ( //创建一个虚拟DOM
            <h1 id='title'>
                <span>hello ,react</span>
            </h1>
        )
        ReactDOM.render(VDOM, document.getElementById('test')); //进行渲染
    </script>

虚拟DOM

1.虚拟DOM本质上是一个obj对象

2.虚拟DOM的属性比真实DOM的属性少

3.虚拟DOM最终会转变为真实的DOM，在页面上显示

JSX语法规则

2.id={id}

3.className=“hh”

4.style={{ color: “blue” }}

函数式组件

<script type="text/babel">
        function Fn() {  //函数名首字母一定要大写
            return <h1>hello</h1>
        }
        //标签一定要闭合
        ReactDOM.render(<Fn />, document.getElementById('test')) 
    </script>

渲染时不能直接用函数名，要用组件标签

函数式组件可以使用props

类式组件

  <script type="text/babel">
        class Mycomponent extends React.Component {
            render() {
                return <h1>类定义组件</h1>
            }
        }
        ReactDOM.render(<Mycomponent />, document.getElementById('test'))
    </script>

类式组件必须继承react中内置的类（react.component)

先new出来一个该类的实例，并通过实例调用原型上的render方法，将render返回的虚拟DOM转为真实DOM，再呈现在页面上

类式组件事件绑定

return <h1 onClick={demo}>今天的天气很{isHot ? '炎热' : '凉爽'}</h1>

 function demo() {

​      console.log(1);

​    };

用onClick = {函数名} onclick中c一定要大写

setState

状态必须用setState进行修改 this.setState({})

state 的值必须要是对象，修改state时也是对象

<script type="text/babel">
        class Mycomponent extends React.Component {
            constructor(props) {   //自己来构造函数，给实例对象的state增加属性
                super(props)
                this.state = {     //要求写成对象
                    isHot: true
                }
                this.changeWeather = this.changeWeather.bind(this);   //创建一个新的函数，且this指向函数实例对象
            }
            render() {              //render中的this都指向组件实例对象
                const isHot = this.state.isHot;
                return <h1 onClick={this.changeWeather}>今天的天气很{isHot ? '炎热' : '凉爽'}</h1>
            }
            changeWeather() {     
                const isHot = this.state.isHot;         
                this.setState({ isHot: !isHot })        //修改状态值
            };
        };
        ReactDOM.render(<Mycomponent />, document.getElementById('test'));
    </script>

state的简写

<script type="text/babel">
        class Mycomponent extends React.Component {
            //初始化状态
            state = { isHot: true };
            //自定义方法（放在函数实例身上）  要用赋值语句的形式+箭头函数  箭头函数的this指向函数实例对象
            changeWeather = () => {
                const isHot = this.state.isHot;
                this.setState({ isHot: !isHot })        //修改状态值
            };
            render() {              //render中的this都指向组件实例对象
                const isHot = this.state.isHot;
                return <h1 onClick={this.changeWeather}>今天的天气很{isHot ? '炎热' : '凉爽'}</h1>
            }
        };
        ReactDOM.render(<Mycomponent />, document.getElementById('test'
    </script>

自定义的方法必须要用赋值语句的形式＋箭头函数

props

<script type="text/babel">
        class Mycomponent extends React.Component {
            render() {
                const { name, age, sex } = this.props;
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>年龄：{age}</li>
                        <li>性别：{sex}</li>
                    </ul>
                )
            }
        };
        const p = { name: 'jen', age: 20, sex: '女' }
        ReactDOM.render(<Mycomponent {...p} />, document.getElementById('test')); //批量传参
        ReactDOM.render(<Mycomponent name='jerry' age='14' sex='男' />, document.getElementById('test'));
    </script>

批量传参的时候用{…对象}

从外部向组件内传递数据

props只读，不能更改传过来数据的值，会报错

对标签属性进行限制

引入prop-types.js

<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>

 <script type="text/babel">
        class Mycomponent extends React.Component {
            render() {
                const { name, age, sex } = this.props;
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>年龄：{age}</li>
                        <li>性别：{sex}</li>
                    </ul>
                )
            }
        };
        Mycomponent.defaultProps = { sex: '男' ,age:18};       //设置默认属性
        Mycomponent.propTypes = {                              //对属性进行限制
            name: PropTypes.string.isRequired
        }
        const p = { name: 'jen', age: 20, sex: '女' }
        ReactDOM.render(<Mycomponent {...p} />, document.getElementById('test')); //批量传参
        ReactDOM.render(<Mycomponent name='jerry' age='14' />, document.getElementById('test'));
    </script>

props简写

<script type="text/babel">
        class Mycomponent extends React.Component {
            static propTypes = {
                name: PropTypes.string.isRequired
            }
            static defaultProps = { sex: '男', age: 18 };
            render() {
                const { name, age, sex } = this.props;
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>年龄：{age}</li>
                        <li>性别：{sex}</li>
                    </ul>
                )
            }
        };

要给类加上一个属性 static propTypes ={ }，进行限制，写在类里面

字符串型的ref

<script type="text/babel">
        class Mycomponent extends React.Component {
            demo = () => {
                const { input1 } = this.refs;
                alert(input1.value)
            }
            render() {
                return (
                    <div>
                        <input ref='input1' type="text" placeholder='点击按钮提示数据' />
                        <button onClick={this.demo}>点我提示左侧数据</button>
                        <input type="text" placeholder='点击按钮提示数据' />
                    </div>
                )
            }
        };
        ReactDOM.render(<Mycomponent />, document.getElementById('test'));
    </script>

ref就是给标签添加一个属性，这个属性会放在refs中，refs.属性名就会找到该标签

回调型ref

<script type="text/babel">
        class Mycomponent extends React.Component {
            demo = () => {
                alert(this.input1.value)
            }
            render() {
                return (
                    <div>
                        <input ref={currentNode => this.input1 = currentNode} type="text" placeholder='点击按钮提示数据' />
                        <button onClick={this.demo}>点我提示左侧数据</button>
                        <input type="text" placeholder='点击按钮提示数据' />
                    </div>
                )
            }
        };
        ReactDOM.render(<Mycomponent />, document.getElementById('test'));
    </script>

ref= {箭头函数}，ref将所在的节点传给函数调用,最后在实例上挂载一个属性为该节点