react技术全家桶（17）函数式组件中使用props

已经学过的state、props和没有学过的rerfs 都是实例的三大属性，按理说没有实例就无法使用这三大属性，
但是一个特殊的props ，函数式组件就可以使用props。
因为函数可以传递参数：
function Person(props) {
const {name,age,sex} = props
return (

• 
  
• 姓名：{name}
• 
  
• 年龄：{age}
• 
  
• 性别：{sex}
• 
  

)
}

    const person = { name: "老刘", age: 18, sex: "" }
    ReactDOM.render(<Person {...person} />, document.getElementById("test"));
    ReactDOM.render(<Person name="tom" age={18} sex="nv" speak={speak} />, document.getElementById("test"));
    function speak() {

还可以加限制：

function Person(props) {
const {name,age,sex} = props
return (

• 
  
• 姓名：{name}
• 
  
• 年龄：{age}
• 
  
• 性别：{sex}
• 
  

)
}

    Person.propTypes = { //加上static就是对象上的属性 不是实例上的属性。
            name: PropTypes.string.isRequired,
            sex: PropTypes.string,
            speak: PropTypes.func
        }
        Person.defaultProps = {
            sex: "男"
        }

    const person = { name: "老刘", age: 18, sex: "" }
    ReactDOM.render(<Person {...person} />, document.getElementById("test"));
    ReactDOM.render(<Person name="tom" age={18} sex="nv" speak={speak} />, document.getElementById("test"));

源代码：